css

transform(변환)

Bittersweet- 2020. 7. 4. 23:09
728x90

transform :변환함수1 변환함수2 변환함수3;

transform : 원근법 이동 크기 회원 기울임;

 

* 2D

 

이동 - translate(x,y)

         translateX(x)

         translateY(y)

크기 - scale(x,y)

         scaleX(x)

         scaleY(y)

회전 - rotate(deg)

비틀기 - skew(x-deg,y-deg)

            skewX(x-deg)

            skewY(y-deg)

전체 적용 - matrix(n,n,n,n,n,n)

 

 

 

 

 

*3D 

 

이동 - translate3d(x,y,z)

         translateZ(z)

크기 - scale3d(x,y,z)

         scaleZ(z)

회전 - rotate3d(x,y,z,a)

         rotateX(x)

         rotateY(y)

         rotateZ(z)

거리 - perspective(n)

전체 적용 - matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - n16개

 

* z축의 이동은 perspective의 설정이 있어야 확인 가능하며 transform 사용 시 제일 앞에 선언되어야 함(px로 입력)

 

 

 

'css' 카테고리의 다른 글

animation  (0) 2020.07.05
transform(변환 속성)  (0) 2020.07.04
Transitions(전환)  (0) 2020.07.04
속성 선택자 with ^, $  (0) 2020.07.03
속성 선택자(Attribute Selector)  (0) 2020.07.03