CSS

변형(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. 박병진
    감사합니다
  2. 콜라
    20201001완료
  3. 김성곤
    20200726 감사합니다! shake 적용해봤는데 재밌네요 ㅋㅋ
  4. 007bbang
    transform이런기능이있다 정도만 배웠는데 좌표값으로 제어하는 방법까지 세세하게 설명해주셔서 감사합니다.
  5. 한강
    transform도 재미있능 기능이네요.
    오늘 시작합니다.200612
  6. 아기별
    아하 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; 이걸 주석처리 했더니 예시 위치에서 시작하더라구요. 뭔가 변형에 초가 먹히면서 제대로 위치가 안잡히는 거 같아요 ㅠㅠ
        대화보기
        • 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 자세히 보기