transform-origin & transform

출처:https://webclub.tistory.com/486

[ transform : rotate ]

시계방향으로 회전

x축 : 양 옆으로

y축 : 위 아래로

z축 : '나'라는 중심이 있을 때 ,

나의 앞으로 +Z

나의 뒤로 -Z

[ transform-origin ] 

   

- 회전 중심(원점. 기준점)을 지정

- transform 속성과 함께 사용 함!( rotate, skew ... )

- 기본값 50% 50%

- transform-origin 단위 :  0%  ( left / top )

          50% ( center )

          100%( right / bottom )

[ transform-style ]

- 자식 요소는 2D의 2차원에서 부모 요소와 동일한 평면에 배치되는 것을,

   transform-style : preserve-3d 을 지정하여 3D차원으로 배치할 수 있음

- 기본값 flat

- {   transform-style : preserve-3d;

      transform : perspective(100px) /* perspective : 100px */  }

* z축으로 100px를 지정했을 때 어떤 변화도 일어나지 않을 것임( 실제로는 움직였지만 화면상에서는 보이지 않음, 2D이기 때문 )

     => 컨테이너 요소에 Perspective를 선언하면 더욱 풍부한 3D적 효과가 나타남 

* perspective : 투영점의 깊이를 설정해 줌

pespective의 px값이 낮을 수록 가까이 보이는 원리이기 때문에 element가 크게 보임

( 투영점 : 나에게 사물이 가까워질수록 점차 커져 보이고, 나에게서 멀어질수록 사물이 점차 작아보임! ) 

부모 요소와 자식 부모에게 각 perspective를 준 결과는 다르다!