如何用JS和CSS制作超炫酷的动态翻书网页特效？

本文共计2019个文字，预计阅读时间需要9分钟。

目录前言思路准备正文

一、CSS实现

1.建立基本框架

2.编写CSS

二、JS实现

总结前言文本将带领大家实现一个有趣的案例，将带大家从零开始，一步步构建一个具有书本效果的页面。

我们平时忙碌时，是否曾想过，是否看过一些学校的高楼大厦？接下来，让我们一起来打造这样一个场景。

目录

• 前言
• 思路准备
• 正文
• 一、CSS实现
• 1、搭建基本框架
• 2、编写CSS
• 二、JS实现
• 总结

前言

本文将带大家来实现一个非常有趣的案例——打开书本效果。我们平常冲浪时是不是看过一些学校高级的录取通知书，翻开通知书就能看见里面的内容，呈现出逼真的3D效果！

先来看效果图：

思路准备

• 把这本书看成是2个容器组成——左半本书和右半本书，左半本书有外表面和内表面，右半本书也有自己的内表面和外表面，相当于两个小矩形。
• 当鼠标点击书本向左移动时实现翻开效果，也就是只有左半本书可以翻动——绕着y轴旋转。
• 同时右半本书的卡片会竖起来，阴影也会随之倾斜，整本书也会旋转一定角度。