요소 박스를 변형하는 속성. 2차원 및 3차원 변형이 가능하며 변형 형태별로 함수 타입의 속성 값을 지정한다.
transform
translate(value, [value]);
HTML 요소 박스를 평면 상에서 수평 이동하는 기능
요소가 변형 기준점으로부터 가로 및 세로 방향으로 이동하는 길이 값을 지정할 수 있다.
translate()로 이동된 요소는 다른 요소의 배치에 영향을 끼치지 않는다.
transform: translate(50px, 50px);scale(number, [number]);
HTML 요소 박스의 크기를 변형하는 기능
translate()함수와 마찬가지로 x, y 값을 지정하여 가로 및 세로 크기를 조절할 수 있다.
지정 값은 단위를 가지지 않는 number 단위로, 이 값은 원래 요소 크기에 지정한 number 값을 곱한 크기로 적용된다.
transform: scale(0.5);rotate(angle)
HTML 요소 박스를 평면상에서 회전하는 기능
함수의 값으로 회전 각도(deg)를 지정할 수 있다.
transform: rotate(45deg);skew(angle, [angle]);
HTML 요소 박스의 기울임을 지정하는 기능
함수 값에 기울기의 각도(deg)를 지정할 수 있으며 각 축 방향별 요소의 기울기를 지정할 수도 있다.
transform: rotate(skewX(15deg)matrix(number, [number], [number], [number])
HTML 요소 박스에 이동 및 회전 크기 변화와 기울임 등을 복합적으로 적용할 수 있는 기능
6개의 값은 scaleX, skewX, skewY, scaleY, translateX, translateY
transform : matrix(0.5, 0.2, 0.3, 0.5, 50, 100)transform-origin
변형 기준점을 지정하는 속성
속성 값은 길이 단위 값과 키워드로 지정할 수 있으며, 배경 이미지의 위치를 지정하는 개념과 동일하게 사용
속성 값은 X, Y, Z 방향으로 3개 까지 입력할 수 있으며, 값이 1 | 2개일 경우 Z축 값은 0이 된다.
div { transform-origin : right bottom ; }
div { transform-origin : 10% 20px ; }
div { transform-origin : 10px 20px 0 ; }transform-style
3D 공간에서 변경된 3차원 좌표를 하위 요소에게 전달할 것인지의 여부를 결정하는 속성
