transform

정의 및 사용

transform 은 요소를 2D 나 3D 변형을 할 수 있게 하는 속성이다. rotate, scale, translate, skew 등과 같은 변형이 가능하다.

정의 및 사용
기본값 none
상속 no
버전 CSS3
자바스크립트 구문 object.style.transform=”rotate(7deg)”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

각 브라우저 마다 접두사를 사용하면 2D transform 이 사용가능하며, 3D 는 Safari 와 Chrome 에서만 지원한다. (IE는 9부터 지원)

구문

2D 속성

속성 값 설명
설명
none 변형 속성을 적용하지 않음
matrix(n,n,n,n,n,n) translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
translate(x,y) 요소의 위치를 옮기는 속성
scale(x,y) 요소의 크기를 비율에 맞춰 확대/축소하는 속성
rotate(angle) 요소를 지정된 각도 만큼 회전시키는 속성
skew
(x-angle, y-angle)
요소를 지정된 각도만큼 모양을 비스듬히 변형시키는 속성

3D 속성

속성 값 설명
설명
none 변형 속성을 적용하지 않음
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
translate3d(x,y,z) 요소의 위치를 옮기는 속성
translateX(x) 요소의 x 좌표 위치를 옮기는 속성
translateY(y) 요소의 y 좌표 위치를 옮기는 속성
translateZ(z) 요소의 z 좌표 위치를 옮기는 속성
scale3d(x,y,z) 요소의 크기를 비율에 맞춰 확대/축소하는 속성
scaleX(x) 요소의 x축 크기를 비율에 맞춰 확대/축소하는 속성
scaleY(y) 요소의 y축 크기를 비율에 맞춰 확대/축소하는 속성
scaleZ(z) 요소의 z축 크기를 비율에 맞춰 확대/축소하는 속성
rotate3d(x,y,z,angle) 요소를 지정된 각도 만큼 회전시키는 속성
rotateX(angle) 요소를 지정된 각도 만큼 x축을 회전시키는 속성
rotateY(angle) 요소를 지정된 각도 만큼 y축을 회전시키는 속성
rotateZ(angle) 요소를 지정된 각도 만큼 z축을 회전시키는 속성
skewX(angle) 요소를 지정된 각도만큼 x축 모양을 비스듬히 변형시키는 속성
skewY(angle) 요소를 지정된 각도만큼 y축 모양을 비스듬히 변형시키는 속성
skewZ(angle) 요소를 지정된 각도만큼 z축 모양을 비스듬히 변형시키는 속성
perspective(n) ..

예제

  • 각 속성마다 -ms-, -moz-, -webkit-, -o- 를 모두 적어줘야 하지만 여기서는 편의상 생락했음을 참고
  • 위 예제의 4개 속성을 하나로 합쳐서 아래 두가지 방법으로도 나타낼 수 있다

  • 위 예제처럼 각각을 나타내는 것보다 matrix 함수로 한번에 나타내는 것이 효율적이지만 matrix 함수로 변환하기 위해서는 삼각함수와 매트릭스 함수 이론을 알아야 한다.

버그 및 이슈

소제목

목록 으로

  • zhtvkq

    2013년 8월 9일, 4:54 오후

    [답변]

    css3 공부 중인데,,,소스들만 보기엔 뭐가 뭔지 헷갈리고 그랬는데….
    님 덕분에 이제 완전히 이해가 된것 같아요~~ 자료들도 너무~ 너무~
    많고 ㅋㅋㅋㅋㅋ
    감사합니당~~ㅋ

    • 키리스

      2013년 9월 30일, 9:25 오전

      [답변]

      콘텐트가 아직 많이 부족합니다. ㅠㅠ 많은 지적질 부탁드려요^^

댓글