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. 하이룽
    CSS 오메이징 합니다.....................
    ㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷ
    신의 기능
  2. 리젤린
    좋은기능 알아갑니다
  3. 김민영
    완료

    감사합니다!
  4. ㅅㅈㅎ
    감사합니다!!
  5. 진짜 진짜 감사드려요
  6. 디링디
    감사합니다 오랫동안 찾고있던 정보였어요
  7. 휴잇
    좋은 강의 감사합니다
  8. 스페이스몽키
    감사합니다~!!
  9. stellar
    Codepen에서 transform 예제 파일의 소스(HTML, SCSS, JS)를 카피해서 제 개발 환경에서
    test를 하다보니
    scss를 css로 컴파일 했는데 오류가 났습니다.
    scss화일에 아래와 같이 import문장이 있는데
    @import "compass/css3";
    오류 메세지는 "File to import not found or unreadable: compass/css3"
    이 문제를 해결하는 방법이 궁금합니다.
  10. 장훈
    여기까지 공부하고... 할 수 있을거 같아서 CSS3 transform페이지를 카피해보려고 했는데 영 안되네요....
  11. 박신우
    와우! 이건 나중에 꼭 써먹을게요 blend랑
  12. 푸른하늘
    12일차 공부 감사합니다
  13. 오빠는다르다
    감사합니다~!!!!!!
  14. 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 자세히 보기