backface-visibility
backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.
기본형
backface-visibility: visible | hidden
- visible : 보이게 합니다. 기본값입니다.
- hidden : 보이지 않게 합니다.
예제 1
<input type="checkbox">
<h4>Backface Visibility</h4>
<div class="card a">visible</div>
<div class="card b">hidden</div>
body {
text-align: center;
margin: 40px 20px;
}
.card {
display: inline-block;
background-color: orange;
width: 200px;
height: 150px;
line-height: 150px;
margin: 10px;
transition: 2s;
}
input {
float: right;
position: fixed;
top: 10px;
right: 10px;
zoom: 2;
}
input:checked ~ .card {
transform: rotateY( 180deg )
}
.a {
backface-visibility: visible;
}
.b {
backface-visibility: hidden;
}
예제 2
- 이미지를 이용한 backface-visibility 예제입니다.
- Flip 되는 과정을 보기 위해 z-index 속성을 추가하였습니다.
<div class="card">
<div class="front image">
<img src="https://bit.ly/3p07Jz0"/>
</div>
<div class="back image">
<img src="https://bit.ly/385RDh8"/>
</div>
</div>
.card {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
}
.image {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all .5s;
backface-visibility: hidden;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
transform: rotateY(-180deg);
}
.card:hover .front {
z-index: 1;
transform: rotateY(180deg);
}
.card:hover .back {
z-index: 2;
transform: rotateY(0deg);
}
같이 보면 좋은 글