반응형
Perspective
-
<HTML/CSS> Transform 2 : Perspective와 translate축 이해컴퓨터 알아가기/HTML CSS 2022. 9. 23. 19:30
CSS의 Transform의 내역은 Rock's Easy Web을 기본으로 공부하고 있습니다. 이번 시간에는 Transform을 사용하면서 바라보는 관점인 Perspective에 대한 이해와 3개의 축인 x, y, z축에 변화를 주어 어떻게 형태가 변하는지 이해해 보는 시간을 갖도록 하겠습니다. 역시 HTML은 placeimg.com에서 더미이미지를 활용하도록 하겠습니다. 이전시간 translateX를 사용하여 x축으로 이동하는 연습을 해 보았습니다. 이번에는 y추곽 z축을 이동하면서 transform의 개념을 잡아 보겠습니다. 1. Translate (x, y, z 축 변화) y축으로 움직여 보면 다음과 같이 할 수 있습니다. 상기 이미지처럼 아래로 100px 이동하였습니다. 첫번째 법칙을 정리한 왼손..