1) 변환 예제 - 카드 뒤집기 .cards { } .card { width: 150px; height: 220px; position: relative; perspective: 600px; } .card .face { width: 150px; height: 220px; border: 1px solid lightgray; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: 2s; position: absolute; backface-visibility: hidden; } .card .face-front { background: url("https://heropy.blog/css/images/p..
CSS) 변환 속성 - perspective
1) perspective 하위 요소를 관찰하는 원근 거리를 설정 속성 값 값 의미 기본값 단위 px, em, cm 등 단위로 지정 사용법 .perspective { width: 200px; perspective:200px; padding: 70px; } .grand-parent { width: 200px; border: 3px solid dodgerblue; transition: 1s; transform: rotateX(-45deg); transform-style: preserve-3d; /* transform-style: flat; */ } .parent { width: 200px; border: 3px solid tomato; transition: 1s; transform: rotateY(45deg..