STYLE SHEET/CSS 3D

CSS 3D - 앞 뒤 다른 모습인 카드 만들기 #2

CSS 3D 첫번째 에 이어 .world 에 마우스 hover시 애니메이션이 작동되도록 만들어본다 .world { width: 80vw; height: 80vh; background: slateblue; display: flex; align-items: center; justify-content: center; perspective: 500px; } .card { display: flex; align-items: center; justify-content: center; width: 100px; height: 150px; margin: 1em; background: tomato; border-radius: 0.5em; font-size: 1.5rem; } 카드 뒤집기 .card { transition: ..

CSS 3D - 앞 뒤 다른 모습인 카드 만들기

CSS 3D를 만들 땐, 만약 카드를 회전을 시켜서 3D로 보이게끔 만들 때 보통 transform: rotateY() 지정해서 옆으로 돌린다거나 할 수 있다 하지만 3D 느낌으로 보이진 않는데 이럴 때, 카드를 감싸고 있는 공간 엘리먼트를 삼차원으로 바꿔준다 즉, 무대 자체가 3D가 되어야한다는 의미 셋팅 CARD CARD CARD .world { width: 80vw; height: 80vh; background: slateblue; display: flex; align-items: center; justify-content: center; } .card { display: flex; align-items: center; justify-content: center; width: 100px; heig..