12. css 변형(transform)

• inherit: 부모 요소의 변형을 HTML 요소에 적용합니다.

• initial: HTML 요소에 기본 변형을 적용합니다.

• matrix(): 2x3 행렬을 사용하여 요소를 2차원으로 변형합니다.

• matrix3d(): 4x4 행렬을 사용하여 요소를 3차원으로 변형합니다.

• none: HTML 요소에 어떠한 변형도 적용하지 않습니다.

• perspective(): 원근 효과를 사용하여 3D로 변형된 요소를 변형합니다.

• rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(): 2D 또는 3D 공간에서 요소를 다양한 축을 따라 회전시킵니다.

• scale(), scale3d(), scaleX(), scaleY(), scaleZ(): 2D 또는 3D 공간에서 요소의 크기를 다양한 축을 따라 조정합니다.

• skew(), skewX(), skewY(): 2D 공간에서 X 및 Y축을 따라 요소를 비틀어집니다.

• translate(), translate3d(), translateX(), translateY(), translateZ(): 2D 또는 3D 공간에서 요소를 다양한 축을 따라 이동시킵니다.

transform 속성은 하나 이상의 CSS 변형 함수를 허용할 수 있으며, 이를 조합하여 복잡한 변형을 만들 수 있습니다. 예를 들어:

div {
  transform: perspective(370px) scaleZ(5) rotate(17deg);
}

이 예제에서는 원근, 확대/축소, 회전을 결합하여 transform 속성에 세 가지 변형 함수를 적용했습니다.

CodePen 예제를 참고하시면 더 자세한 내용을 확인할 수 있습니다.