생활코딩

Coding Everybody

코스 전체목록

닫기

변형(transform)

소개

transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다. 

형식

transform은 아래와 같은 형식이 올 수 있습니다.

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

참고

댓글

댓글 본문
  1. 곤비
    0219
  2. 새콤달콤
    완료
  3. DreamBoy
    2023.09.22. CSS - 그래픽 - 변형(transform) 파트를 시작합니다.
  4. AgainstartJH
    2022년 11월 28일 월요일 학습완료
  5. 09년생개발자
    22.3.22
  6. INJE
    22/03/18
  7. 임앤강
    2022-01-28 수강완료.
  8. 드림보이
    2021.11.16. 변형(transform) 파트 수강완료
  9. choi
    완료
  10. jeisyoon
    2021.06.24 Transform - OK
  11. yogg
    transform 효과 ㅎㅎ
  12. transform: 이미지변형
  13. 따뜻한츄르
    210101
  14. 201220 shake 엄청 귀엽네요 ㅋㅋㅋ
  15. 만듀
    2020.12.19
  16. <ul>
    <li>Thanks for your teaching.</li>
    <li>Thanks for your teaching,</li>
    <li>Thanks for your teaching!</li>
    <li>Thanks for your teaching!!</li>
    <li>Thanks for your teaching!!!</li>
    </ul>
  17. 박병진
    감사합니다
  18. 콜라
    20201001완료
  19. 김성곤
    20200726 감사합니다! shake 적용해봤는데 재밌네요 ㅋㅋ
  20. 007bbang
    transform이런기능이있다 정도만 배웠는데 좌표값으로 제어하는 방법까지 세세하게 설명해주셔서 감사합니다.
  21. 한강
    transform도 재미있능 기능이네요.
    오늘 시작합니다.200612
  22. 아기별
    아하 hover쪽에 두지 않고 h1속성으로 transform-origin 자리를 설정해주면 오류가 해결되는군요 감사합니다!!
    대화보기
    • 메론맛
      h1 {
      background-color: indigo;
      color: white;
      display: inline-block;
      padding: 5px;
      font-size: 3rem;
      margin: 100px;

      transform-origin: left top;

      }

      h1:hover {

      transform: scale(1.5);

      transition: all 1s;

      }
      대화보기
      • 새싹코딩
        이거 혹시 답변 찾으셨을까요? 저도 이런 상황이라서 이거저거 손대봤는데 transition: all 1s; 이걸 주석처리 했더니 예시 위치에서 시작하더라구요. 뭔가 변형에 초가 먹히면서 제대로 위치가 안잡히는 거 같아요 ㅠㅠ
        대화보기
        • Blanc
          2020.01.06
        • 힙합엄지
          transform-origin을 사용하면 호버상태일때 transform기능이 transform-origin의 위치에 맞게 변형되야하는데

          여전히 중간에서 변형되고 그 이후에 transform-origin로 설정한 부분으로 이동합니다 ㅠㅠ 아시는 분 계신가요 ㅠㅠ
        • 다나가
          190807 - 수강완료!!!!
        • FIRE
          20190731 완료
        • lygon
          2019-03-10 완료
        • 숨이
          완료햇습니당
        • 하이룽
          CSS 오메이징 합니다.....................
          ㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷ
          신의 기능
        • 리젤린
          좋은기능 알아갑니다
        • 김민영
          완료

          감사합니다!
        • ㅅㅈㅎ
          감사합니다!!
        • javaz
          진짜 진짜 감사드려요
        • 디링디
          감사합니다 오랫동안 찾고있던 정보였어요
        • 휴잇
          좋은 강의 감사합니다
        • 스페이스몽키
          감사합니다~!!
        • stellar
          Codepen에서 transform 예제 파일의 소스(HTML, SCSS, JS)를 카피해서 제 개발 환경에서
          test를 하다보니
          scss를 css로 컴파일 했는데 오류가 났습니다.
          scss화일에 아래와 같이 import문장이 있는데
          @import "compass/css3";
          오류 메세지는 "File to import not found or unreadable: compass/css3"
          이 문제를 해결하는 방법이 궁금합니다.
        • 장훈
          여기까지 공부하고... 할 수 있을거 같아서 CSS3 transform페이지를 카피해보려고 했는데 영 안되네요....
        • 박신우
          와우! 이건 나중에 꼭 써먹을게요 blend랑
        • 푸른하늘
          12일차 공부 감사합니다
        • 오빠는다르다
          감사합니다~!!!!!!
        • Stephen Lee
          <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css"> 링크만 <head> 내부에 넣으시면 class 로 <h1 class="shake"> 나 <h1 class="shake-crazy"> 이런식으로 적어주시면 실행돼요!
          대화보기
          • ballbot
            신기..하네요!
          • nevertoolate
            링크 해 주신 곳에 가보았는데, github 을 깔아야 하는 건가요??
          • php가 첫취업?
            마니 만져보고 자기것으로 만들어야하는게 관건인거 같습니다
          • 김지민
            오~ 설명해주신 거 codepen에 있는 html과 css를 복사만해서 적용만해도 그 화면이 나오는 건가요 ?
          • funlife
            감사합니다.
          • 임지호
            transform : 엘리먼트 크기, 비틀기, 회전 등 포토샵에서 가능했던 작업들을 코드화한 기능
            - 2차원, 3차원이 있다
            - 여러 속성을 쓰고 싶으면 한 줄에 이어서 쓴다
            - transform-origin : 중심축을 중앙이 아닌 곳으로 변경하고 transform한다
            * 여러가지 transform library를 활용해보는 것도 좋다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기