transform 속성

transform 속성은 크게 2가지로 나눌 수 있습니다.

2D Transforms 와 3D Transforms 입니다.

우선 브라우저 서포트 현황을 알아 봅시다.

propertiy	크롬	엣지	파이어폭스	사파리	오페라
2D Transforms	36.0 ~ 4.0 -webkit-	10.0 ~ 9.0 -ms-	9.0 ~ 3.2 -moz-	23.0 ~ 15.0 -webkit-  10.5 -o-	23.0 ~ 15.0 -webkit-  10.5 -o-
3D Transforms	36.0 ~ 12.0 -webkit-	12.0 ~ 10.0	16.0 ~ 10.0 -moz-	9.0 ~ 4.0 -webkit-	23.0 ~ 15.0 -webkit-

※ 정확한 정보가 아닐 수 있으니 문제점 지적 부탁드립니다. ^^

Syntax

 
tranform: none | tramsform-function | initial | inherit ;
 

Property Values

값	설명	예시	w3school Link 버튼
none	아무변화 없음을 정의	transform:none;	바로가기
matrix(n,n,n,n,n,n)	6개의 값을 가진다 (2D)	transform:matrix(0.586,0.8,-0.8,0.586,40,40);	바로가기
matrix3d  (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	16 값의 4 × 4 행렬을 이용한다 (3D)
translate(x,y)	2D 변환을 정의 (2D)	translate(20px) or translate(20px,10px)	바로가기
translate3d(x,y,z)	3D 변환을 정의 (3D)
translateX(x)	X 축에 대한 값만을 이용하여 변환을 정의	transform:translateX(10px);	바로가기
translateY(y)	Y 축에 대한 값만을 이용하여 변환을 정의	transform:translateY(10px);	바로가기
translateZ(z)	Z 축에 대한 값만을 이용하여 3 차원 변환을 정의
scale(x,y)	2D 스케일 변환을 정의합니다	transform:scale(2,2);	바로가기
scale3d(x,y,z)	3D 스케일 변환을 정의합니다
scaleX(x)	X 축에 대한 값만 스케일 변환을 정의	transform:scaleX(2);	바로가기
scaleY(y)	Y 축에 대한 값만 스케일 변환을 정의	transform:scaleY(2);	바로가기
scaleZ(z)	Z 축의 값에 대한 3D 스케일 변환을 정의
rotate(angle)	2D 회전각을 정의	transform:rotate(45deg);	바로가기
rotate3d(x,y,z,angle)	3 차원 회전을 정의
rotateX(angle)	X 축을 따라 3 차원 회전을 정의	transform:rotateX(130deg);	바로가기
rotateY(angle)	Y 축을 따라 3 차원 회전을 정의	transform:rotateY(130deg);	바로가기
rotateZ(angle)	Z 축을 따라 3D 회전을 정의	transform:rotateZ(130deg);	바로가기
skew(x-angle,y-angle)	X 축과 Y 축을 따라 2D 스큐 변환을 정의합니다	transform:skew(10deg,10deg));	바로가기
skewX(angle)	X 축 따라 2D 스큐 변환을 정의합니다	transform:skewX(30deg);	바로가기
skewY(angle)	Y 축 따라 2D 스큐 변환을 정의합니다	transform:skewY(30deg);	바로가기
perspective(n)	3 차원 변형 요소의 사시도(?)를 정의
initial	기본값으로이 속성을 설정합니다
inherit	부모의 값을 상속 받습니다