Transform

개요

2, 3차원 변환을 위한 다양한 함수들이 내장되었다.

관련 함수

matrix()
6개의 매개 변수 값을 이용해서 2차원적인 변환 처리를 해준다.
matrix3d()
16개의 매개 변수 값으로 4x4 행렬을 사용하여 3차원적인 변형을 처리한다.
perspective()
사용자와 z축으로 평면상의 거리를 설정한다.
rotate()
2차원 방식으로 회전 처리한다.
rotate3d()
3차원 공간에 회전축을 지정하여 회전처리한다.
rotateX()
x 회전축으로 3차원 방식으로 회전처리 한다.
rotateY()
y 회전축으로 3차원 방식으로 회전처리 한다.
rotateZ()
z 회전축으로 3차원 방식으로 회전처리 한다.
scale()
가로, 세로 비율을 지정하여 크기를 변경한다.
scale3d()
x, y, z 축 방향으로 크기 조정을 한다.
scaleX()
x축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.
scaleY()
y축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.
scaleZ()
3D 공간에서 z축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.
skew()
매개 변수로 지정된 X, Y축의 각도에 따라 2차원 방식으로 기울기를 처리한다.
skewX()
매개 변수로 지정된 X축의 각도에 따라 2차원 방식으로 기울기를 처리한다.
skewY()
매개 변수로 지정된 Y축의 각도에 따라 2차원 방식으로 기울기를 처리한다.
translate()
요소를 지정된 x, y 좌표 위치로 이동한다.
translate3d()
x축과 y축 그리고 z축의 값을 이용하여 3차원 방식으로 이동처리한다.
translateX()
대상을 x축으로 이동한다. 음수값을 허용한다.
translateY()
매개 변수의 값을 통해 y축으로 이동 처리한다. 음수값을 허용한다.
translateZ()
매개 변수의 값을 통해 z축으로 이동 처리한다. 음수값을 허용한다.

W3C Modules

CSS Transforms Module Level 1: W3C Candidate Recommendation, 14 February 2019
CSS Transforms Module Level 2: W3C Working Draft, 9 November 2021

Functions

Functions

Transform

개요

관련 함수

matrix()

matrix3d()

perspective()

rotate()

rotate3d()

rotateX()

rotateY()

rotateZ()

scale()

scale3d()

scaleX()

scaleY()

scaleZ()

skew()

skewX()

skewY()

translate()

translate3d()

translateX()

translateY()

translateZ()

W3C Modules