transform
-
<HTML/CSS> Animation : 카드 뒤집기컴퓨터 알아가기/HTML CSS 2022. 9. 25. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 오늘 배울 내용은 마우스를 올렸을때 카드가 뒤집히는 Animation을 공부하고자 합니다. 이 효과를 공부하기 위해 지금까지 CSS의 Animation 효과의 기본을 여러가지로 공부해 보았습니다. 카드가 뒤집혀지는 효과를 통하여 자바스크립트 카드뒤집기 게임을 만들기 위한 기본과정을 살펴본 겁니다. ▒ 카드 뒤집기 CSS에서 카드를 뒤집는 효과는 그동안 배웠던 Animation 속성중 Transition, Transform, Rotation을 전부 응용하는 작업입니다. 이를 위해서 아무 그림이나 사용할 수 있게 작업하는 폴더에 그림파일을 저장합니다. 저는 첫화면은 다음과 같은 그림을 올리고 마우스를 올리면 뒷면의 글..
-
<HTML/CSS> Transform 3 : Rotation 회전 이해컴퓨터 알아가기/HTML CSS 2022. 9. 24. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 이제 처음 왼손법칙을 설명할때 알아두어야 한 회전에 대해 공부를 해보고자 합니다. x, y, z축에 대한 회전축과 방향은 아래 링크를 다시한번 보고 오면 이해가 쉽습니다. (꼭 기억해 두어야 합니다. 나름대로 제가 만든거니) 2022.09.22 - [컴퓨터 알아가기/HTML CSS] - Transform 1 : 기본개념 이해 ▒ Rotation 속성 Transform의 rotation 속성은 요소를 회전시키는 Animation 효과입니다. 이를 위해서 지나번 부모태그인 에 perspective를 적용하는게 아니라 이미지 자체에 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 이동하였습니다. 첫번째 법칙을 정리한 왼손..
-
<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 움직이는 애니메..