[CSS] transform 변환 속성

 

▶ transform 변환 속성.

 

- transform-origin: 요소의 변환이 일어나는 특정한 기준점 설정.
  - 0% 0%는 좌측 상단, 100% 100%는 우측 하단을 의미.
  - X축: left, right, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%.
  - Y축: top, bottom, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%.
  - Z축: 단위 사용. 기본값 0.

 

- transform-style: 3차원 변환 요소의 자식에서도 또 다른 3차원 변환을 사용할지 설정하는 것.

 

- perspective: 하위 요소를 관찰하는 원근 거리를 설정.

 

- perspective-origin: 원근 거리 기준점 설정.

 

- backface-visibility: 3D 변환으로 회전된 요소의 뒷면을 볼 수 있는데 이를 안 보이도록 설정할 수 있음.