html
<div class="wrapper">
<div class="item front">앞</div>
<div class="item back">뒤</div>
</div>
css
.wrapper {
position: relative;
width: min-content;
height: min-content;
perspective: 300px; /* 원근법 적용 */
}
.wrapper .item {
width: 100px;
height: 100px;
border: 4px solid red;
box-sizing: border-box;
font-size: 60px;
backface-visibility: hidden; /* 뒤집어진 요소 숨기기 */
transition: 1s;
}
.wrapper .item.front {
position: absolute;
transform: rotateY(0deg);
}
.wrapper:hover .item.front {
transform: rotateY(180deg);
}
.wrapper .item.back {
transform: rotateY(-180deg);
}
.wrapper:hover .item.back {
transform: rotateY(0deg);
}