[css] transform ( 이동, 회전, 확대/축소, 비틀기 )
Transform 변환,변형 [ 위치이동(X,Y,Z), 회전, 크기변경(확대,축소), 비틀기(기울기) ]
기본이 되는 움직임의 방향 (transform-origin: 0% 0%;)
transform 속성
| 속성 | 2/3D | 내용 |
|---|---|---|
| transform | 2,3 | |
| transform-origin | 2,3 | default(50% 50%) 변형의 기준점을 설정한다. |
| transform-style | 3 | transform-style: preserve-3d; |
| perspective | 3 | 원근감, 자신이 아니고, 하위요소를 관찰한다. 값이 크면 원근감이 커진다. 기준은 perspective-origin 설정값을 기준으로 한다. |
| perspective-origin | 3 | default( 50% 50%) left,right,top,bottom, center 과 % 단위 사용 |
| backface-visibility | 3 | 입체적인 뒷면의 가시성 (visible or hidden) |
transform Method
| 속성 | 2/3D | 내용 |
|---|---|---|
| matrix(6 x n) matrix3d(16 x n) | 2 3 | 한번에 표시 |
| rotate(angle) rotate3d(x,y,z,angle) | 2 3 | 회전한다. |
| rotateX(angle) | 3 | 회전한다. |
| rotateY(angle) | 3 | 회전한다. |
| rotateZ(angle) | 3 | 회전한다. |
| translate( x, y ) translate3d( x, y, z ) | 2 3 | 이동한다. |
| translateX(x) | 3 | 이동한다. |
| translateY(y) | 3 | 이동한다. |
| translateZ(z) | 3 | 이동한다. |
| scale( x, y ) scale3d( x, y, z ) | 2 3 | 확대한다. |
| scaleX(n) | 2,3 | 확대한다. |
| scaleY(n) | 2,3 | 확대한다. |
| scaleZ(n) | 3 | 확대한다. |
| perspective(n) | 3 | transform-origin을 기준으로 자기자신을 관찰대상으로 원근감을 표시한다. |
| skew( x, y ) | 2 | x,y측으로 비튼다 |
| skewX(angle) | 2 | 좌상과 우하를 잡고 위,아래로 당기는 느낌 |
| skewY(angle) | 2 | 좌상과 우하를 잡고 좌,우로 당기는 느낌 |
1) 기준점 설정하기 ( transform-origin )
※ default 값 : transform-origin: 50% 50%;| X축 | left,right,center, lenght, % |
| Y축 | top,bottom,center, lenght, % |
| Z축 | lenght,view가 z축에 배치되는 곳을 지정한다.(3D변환(transition)과 함께 사용될 경우) ????? |
2) 3D 를 위해 부모요소 속성
| perspective | 원근,소실점,투시도법 |
| perspective-origin | 원근법에 대한 기준점설정 |
| transform-style: preserve-3d | 요소의 자식이 3D공간에 배치 |
3) 위치이동 ( translate[3d][X|Y|Z]
※ default : translate() = translateY() transform: translate(50px, 100px);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px); // 백분률(%)로 지정할 수 없다. 지정해도 0이 됨
transform: perspective(500px) translate3d(3em, 5em, 200px);
px,em,in : 크기만큼 이동
% : 자신의 사이즈를 기준 100분률 이동
4) 회전 ( rotate[3d][X|Y|Z] )
※ 회전은 순차적회전이 아니고 각각 X,Y,Z축의 원점에서의 회전후 합한값이 된다.
x,y,z을 설정시 x로 회전후, y회전-z회전 의 개념이 아니고
1. 원본에서 X회전
2. 원본에서 Y회전
3. 원본에서 Z회전
최종적으로 1,2,3 번을 합한것으로 표시
transform: rotate(45deg);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg); // 0~1사이 회전 축을 나타내는 벡터좌표
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: rotate3d(x,y,z,angle);
X : X축을 기준으로 회전 : 앞에서 뒤쪽으로 돌아감(위뒤, 아래앞 쪽으로)
Y : Y축을 기준으로 회전 : 책장넘기듯 돌아감 (왼쪽뒤, 오른쪽앞 으로)
Z : Z축을 기준으로 회전 (rotate와 동일) : 우측으로 회전
5) 크기변경-확대/축소 ( scale[3d][X|Y|Z] )
각 X,Y,Z축으로 크기를 늘림
6) 비틀기,기울기 ( skew[[X|Y] )
X : 좌상(왼쪽당김), 우하(오른쪽당김)
Y : 좌상(위로당김), 우하(아래당김)
x) 혼합사용
transform: translate(30px, 20px) rotate(20deg);
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);