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) 변환속성 - backface-visibility
1) backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정 속성 값 값 의미 기본값 visible 뒷면 숨기지 않음 visible hidden 뒷면 숨김 사용법 .img1 { width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); backface-visibility: visible; } .img2 { width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); backface-visibility: hidden; } ※..