以下是一个实现图书开合动画的CSS代码示例:
HTML部分:
<div class="book">
<div class="cover">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
CSS部分:
.book {
width: 200px;
height: 250px;
perspective: 800px;
perspective-origin: center right;
}
.cover {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transition: transform 1s;
}
.front {
background-color: #e2e2e2;
transform: rotateY(0deg);
}
.back {
background-color: #f5f5f5;
transform: rotateY(-180deg);
}
.cover:hover {
transform: rotateY(-180deg);
}
这段代码创建了一个图书的HTML结构,使用CSS中的3D变换和过渡效果实现了图书的开合动画。当鼠标悬停在图书上时,图书将会以Y轴为中心进行翻转。