반응형
backface-visibility
-
<HTML/CSS> Animation : 카드 뒤집기컴퓨터 알아가기/HTML CSS 2022. 9. 25. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 오늘 배울 내용은 마우스를 올렸을때 카드가 뒤집히는 Animation을 공부하고자 합니다. 이 효과를 공부하기 위해 지금까지 CSS의 Animation 효과의 기본을 여러가지로 공부해 보았습니다. 카드가 뒤집혀지는 효과를 통하여 자바스크립트 카드뒤집기 게임을 만들기 위한 기본과정을 살펴본 겁니다. ▒ 카드 뒤집기 CSS에서 카드를 뒤집는 효과는 그동안 배웠던 Animation 속성중 Transition, Transform, Rotation을 전부 응용하는 작업입니다. 이를 위해서 아무 그림이나 사용할 수 있게 작업하는 폴더에 그림파일을 저장합니다. 저는 첫화면은 다음과 같은 그림을 올리고 마우스를 올리면 뒷면의 글..