html5+css3 3d transforms 制作超逼真翻书效果演示代码
时间: 2024-03-17 12:45:37 浏览: 23
以下是一个使用HTML5和CSS3制作的超逼真翻书效果的演示代码:
HTML部分:
```
<div class="book">
<div class="cover">
<div class="front">
<img src="cover.jpg" alt="封面">
</div>
<div class="back">
<img src="back.jpg" alt="背面">
</div>
</div>
<div class="pages">
<div class="page">
<img src="page1.jpg" alt="第一页">
</div>
<div class="page">
<img src="page2.jpg" alt="第二页">
</div>
<div class="page">
<img src="page3.jpg" alt="第三页">
</div>
<div class="page">
<img src="page4.jpg" alt="第四页">
</div>
</div>
</div>
```
CSS部分:
```
.book {
width: 400px;
height: 300px;
position: relative;
perspective: 1000px;
}
.cover {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(-180deg);
}
.pages {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.page {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-origin: 0 0;
}
.page:nth-child(1) {
transform: rotateY(0deg) translateZ(1px);
}
.page:nth-child(2) {
transform: rotateY(-90deg) translateZ(1px);
}
.page:nth-child(3) {
transform: rotateY(-180deg) translateZ(1px);
}
.page:nth-child(4) {
transform: rotateY(-270deg) translateZ(1px);
}
.book:hover .cover {
transform: rotateY(180deg);
}
.book:hover .pages {
transform: rotateY(-180deg);
}
```
JavaScript部分:
```
// 无需JavaScript
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)