CSS 3D 트랜스폼(Transforms)

CSS transform

1. 트랜스폼을 적용할 요소에 적용하는 속성

   transform-origin
   backface- visibility
   
   rotateX()
   rotateY()
   rotateZ()
   rotate3d(x,y,z)
   
   translateX()
   translateY()
   translateZ()
   translate3d(x,y,z)
   
   scaleX()
   scaleY()
   scaleZ()
   scale3d(x,y,z)
   
   skewX()
   skewY()
   skew()
   x,y만 가능
   
   perspective()
   투시: 설계시 많이 활용
   
   perspective
   perspective-origin
   소실점을 잡을 때 사용
   transform-style: preserve-3d
   요소의 자식이 3D 공간에 배치

실습

perspective는 소실점을 나타내며 값이 작을 수록 유저에게 가까운 느낌을 준다.
부모요소에 preserve-3d가 들어가야만 3d로 동작하는 점 유의.