transform: 변환함수1 변환함수 2 ...;
: 요소의 위치, 크기, 형태 등을 변환
: 원근법, 이동, 크기, 회전, 기울임 ...
translate
: 요소의 위치를 이동
: 단위는 px
- 2D 변환 함수
translate(x,y)
: 지정된 만큼 x, y축으로 이동translateX(x)
: 지정된 만큼 x축으로 이동translateY(y)
: 지정된 만큼 y축으로 이동- 3D 변환 함수
translateZ(z)
: 지정된 만큼 z축으로 이동
scale
: 요소의 크기를 변환
: 단위는 배수
- 2D 변환 함수
scale(x,y)
: x, y축으로 지정된 만큼 크기 변환scaleX(x)
: x축으로 지정된 만큼 크기 변환scaleY(y)
: y축으로 지정된 만큼 크기 변환- 3D 변환 함수
scale3d(x,y,z)
: x, y, z축으로 지정된 만큼 크기 변환scaleZ(z)
: z축으로 지정된 만큼 크기 변환
rotate
: 요소를 회전
: 단위는 각도 (deg)
- 2D 변환 함수
rotate(degree)
: 지정된 만큼 회전- 3D 변환 함수
rotateX(x)
: x축을 기준으로 지정된 만큼 회전rotateY(y)
: y축을 기준으로 지정된 만큼 회전rotateZ(z)
: z축을 기준으로 지정된 만큼 회전rotate3d(x,y,z,deg)
: x, y, z 값을 가진 여러 축을 지정된 만큼 회전
skew
: 요소의 형태를 기울임
: 단위는 각도 (deg)
- 2D 변환 함수
skew(x,y)
: 지정된 만큼 x, y축 방향으로 기울임skewX(x)
: 지정된 만큼 x축 방향으로 기울임skewY(y)
: 지정된 만큼 y축 방향으로 기울임
perspective
: 하위 요소를 관찰하는 원근 거리를 지정
: 단위는 px
: 단위가 작을 수록 가까움
perspective
: 3D 변환으로 회전되어 보이는 요소의 뒷면 숨김 여부
- 기본값
visible
: 뒷면 보임- 설정값
hidden
: 뒷면 숨김