Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

web sprit

transform 속성 본문

웹5/CSS3

transform 속성

커드만 2016. 4. 14. 23:20

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

1
2
3
 
tranform: none | tramsform-function | initial | inherit ;
 
cs




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

 부모의 값을 상속 받습니다

 

 


Comments