카드를 뒤집는 효과를 줄 때 기억해야 할 css는
1. 카드 앞뒷면에 적용해야 할 "backface-visibility: hidden;"
2. 카드를 3d 적용을 위해 카드 앞뒷면의 부모에게 적용해야 할 "transform: preserve-3d;"가 있다.
| 속성 | 설명 |
transform: preserve-3d; |
자식 요소들에게 3d 적용 속성 (부모에게 적용) |
backface-visibility: hidden; |
요소를 180도로 돌렸을 때 뒷면 숨김처리 |
아래 예시 짤과 예시 코드를 참고~
코드
<!doctype HTML>
...
<body>
<div class="wrapper">
<div class="card">
<div class="card-front"></div>
<div class="card-back"></div>
</div>
</div>
<style>
.wrapper{
-webkit-perspective: 1200px;
perspective: 1200px;
}
.card{
position: absolute;
width: 12em;
height: 12em;
transition: all .3s ease-out;
transform-style: preserve-3d;
}
.front,
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front{
background: yellow;
}
.back{
background: blue;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.wrapper:hover .card{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</body>
</html>
728x90
반응형
'웹 스터디노트 > CSS' 카테고리의 다른 글
| [css] clip-path를 이용한 텍스트 안 wave 애니메이션 (0) | 2023.04.26 |
|---|---|
| 단어가 짧을 때 양쪽 정렬(text-align: justify) 방법 [only css] (1) | 2023.04.11 |
| [ css ] position: sticky가 안 먹는 경우, 적용 조건 (1) | 2023.03.28 |
| [css] 말줄임 여러 줄 예시 (1) | 2023.02.14 |
| CSS grid 간략 공부 (0) | 2023.01.10 |
| html에 rem으로 작업 시 (0) | 2022.06.22 |
| css3 포토샵 효과: mix-blend-mode (0) | 2020.09.10 |
| 다크 모드 코딩 방법 ( css : prefers-color-scheme ) (1) | 2020.03.09 |
댓글