translate
-
<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 이동하였습니다. 첫번째 법칙을 정리한 왼손..
-
<HTML/CSS> Transform 1 : 기본개념 이해컴퓨터 알아가기/HTML CSS 2022. 9. 22. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 지금부터는 Transform에 대한 내역을 공부를 해보도록 하겠습니다. Transform은 말 그대로 전송하고 변형시키는 겁니다. 이 과정에서는 관점(Perspective)에 대한 이해를 하는게 포인트입니다. 관점이란 바라보는 기준점이라 생각하면 됩니다. 역시 개발자들이 사용하는 더미이미지 사이트인 placeimg.com 에 접속하여 연습용 사진을 가지고 알아보도록 하겠습니다. 참고로 더미이미지 사이트인 만큼 저장할 때 마다 그림이 바뀌는 것은 감안하고 보기 바랍니다. 다음과 같이 HTML 내용을 작성하고 브라우저를 보면 다음과 같이 나옵니다. 상기 이미지를 우측으로 더 정확히는 X축으로 100px 움직이는 애니메..