一下面的html代码为例:

在每个 article 后面都有一个 a 标签中有 href ，显示为next。看到第一个 article 的 href 等于 #wifi，其表示点击此next时，页面会跳转到第二个article页面；对第二张页面也是一样。所以，接下来，我们要把每一个article元素都显示为一张页面，这样他们之间就会相互跳转。

上述代码设置了页面全屏展示，没有内外边距；设置 overflow 属性为 hidden，让超出全屏区域以外的元素不被显示；设置body为相对定位，让两个 article 元素为绝对定位。

对article进行了共同元素的设置：高度、宽度、边距都是全屏显示；设置 transition 动画效果。 之后又单独设置每一个article，设置不同的背景颜色（便于区分）；设置第一个article的 left属性为 0，使其默认显示在屏幕中间；设置第二个article的left属性为100%，使其隐藏在屏幕右侧（相当于不显示）。 到此，效果图如下：

然后，为了页面和动画更加好看，略微增加一些样式：

其中 text-decoration属性设置参考如下： https://www.w3school.com.cn/cssref/pr_text_text-decoration.asp

接下来，我们借助jQuery来实现切换动画的功能： 在前面代码的基础上，将下面的代码片段添加到 < body > 标签中。

为两个页面中的 a 元素设置了相同过得功能参数。在函数中，首先调用了 click 事件对象的 preventDefault 方法，其目的是阻止超链接的默认锚点跳转动作。接下来，使 tablet 和 wifi 两个页面分别切换名为 move 的类，也就是说当这两个页面没有 move 类时添加这个类，反之去掉这个类（这是为什么再次点击能返回到 tablet 页面的原因）。 move类的作用将使页面在切换后移动到其所设置的位置。

现在，我们设计页面的切换效果是单击 tablet 页面中的 next 按钮时，该页面向左移动到屏幕之外，同时wifi页面从屏幕右侧移动到屏幕中央，完成切换过程。

基于上述动画的描述，我们设置 tablet 的 left 属性为 -100%，将其定位到屏幕以外的位置；而 wifi 的left 属性为0。 创建两个 move类，以便于上面的 js 代码的运行：

现在效果如下图：

使用 transform 中的 scale 方法。方法有两个参数：分别是水平方向和垂直方向的缩放值， 0 代表缩放到最小，1 代表缩放到原始大小。可参见：https://www.w3school.com.cn/css3/css3_2dtransform.asp

可以模仿上面代码，来设计一下3D动画。

设置了页面绕Y轴旋转，首次切换时 tablet 从 0 度旋转到 -180度隐藏起来， wifi 则从180度旋转到0度完成显示切换。首次切换朝左转圈，然后又朝右转圈。（这里的正负角度值我理解的是旋转的方向）。 只是这样设计会出现一些问题，看下面的效果图： 会发现页面只是一张在旋转，而且还是反的。这是因为，当 tablet 页面翻过去后，把其背面的页面给显示出来。而我们要的是wifi 的页面，也就是说，现在要去掉这个“反面”。这里我们设置 backface-visibility 为hidden,即翻面后隐藏。

这样设置后，页面变为： 还可以加入 perspective 属性，是旋转效果看起来更加立体： https://www.w3school.com.cn/cssref/pr_perspective.asp 上面虽说不支持，但是现在浏览器还是可以支持的，对于这个问题，我们先试一试。

简单的，就把旋转属性和缩放属性同时设置就行了。这里只需要把之前的整合一下即可。