一下面的html代码为例:
<body>
<article id="tablet">
<img src="tablet.png" alt="tablet">
<h1>Comprehensam</h1>
<p>Mel homero labores ce maluisset sententiae qui,...s dissentiunt ad, mel atqui oblique aliquam te.</p>
<a href="#wifi">Next</a>
</article>
<article id="wifi">
<img src="wifi.png" alt="wifi">
<h1>Adversarium</h1>
<p>Ea qui graece facilisi persequeris. Ne est quodsi atomorum, ... autem forensibus dissentiet nec ne. Copiosae similique ex qui.</p>
<a href="#tablet">Next</a>
</article>
</body>
注意以上代码和之前不同之处：
在每个 article 后面都有一个 a 标签中有 href ，显示为next。看到第一个 article 的 href 等于 #wifi，其表示点击此next时，页面会跳转到第二个article页面；对第二张页面也是一样。所以，接下来，我们要把每一个article元素都显示为一张页面，这样他们之间就会相互跳转。
html, body{
height: 100%; /*使得页面全屏展示*/
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
text-align: center;
color: #ffffff;
overflow: hidden; /*超出屏幕的部分隐藏*/
position: relative;
}
上述代码设置了页面全屏展示，没有内外边距；设置 overflow 属性为 hidden，让超出全屏区域以外的元素不被显示；设置body为相对定位，让两个 article 元素为绝对定位。
article{
position: absolute;
width: 100%;
height: 100%;
padding: 100px;
box-sizing: border-box;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
top: 0;
}
#tablet{
background: #4ac4aa;
left: 0;
}
#wifi{
background: #ea5634;
left: 100%;
}
对article进行了共同元素的设置：高度、宽度、边距都是全屏显示；设置 transition 动画效果。
之后又单独设置每一个article，设置不同的背景颜色（便于区分）；设置第一个article的 left属性为 0，使其默认显示在屏幕中间；设置第二个article的left属性为100%，使其隐藏在屏幕右侧（相当于不显示）。
到此，效果图如下：
然后，为了页面和动画更加好看，略微增加一些样式：
h1{
font-size: 4em;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); /*设置下边界线*/
padding-bottom: 30px; /*设置下边界线的内边距*/
}
p{
color: rgba(255, 255, 255, 0.8); /*设置段落颜色和透明度*/
margin-bottom: 30px; /*设置下边的外边距*/
}
a{
color:#ffffff;
font-size: 1.5em;
padding: 5px 50px;
border: 1px solid #ffffff; /*设置边框 粗细、样式、颜色*/
border-radius: 4px; /*设置边框圆角*/
text-decoration: none; /*设置文本无下线*/
}
其中 text-decoration属性设置参考如下：
https://www.w3school.com.cn/cssref/pr_text_text-decoration.asp
接下来，我们借助jQuery来实现切换动画的功能：
在前面代码的基础上，将下面的代码片段添加到 < body > 标签中。
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#tablet').toggleClass('move');
$('#wifi').toggleClass('move');
});
});
</script>
代码解释：
- toggleClass()：对设置或移除所选元素的类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。。https://www.w3school.com.cn/jquery/attributes_toggleclass.asp ；这里是把 #tablet或#wifi 类切换为 move，鼠标点击 next 后，将执行 move 类里面的内容。而切换后，根据函数用法，再次点击next，又会回到 tablet 页面。
为两个页面中的 a 元素设置了相同过得功能参数。在函数中，首先调用了 click 事件对象的 preventDefault 方法，其目的是阻止超链接的默认锚点跳转动作。接下来，使 tablet 和 wifi 两个页面分别切换名为 move 的类，也就是说当这两个页面没有 move 类时添加这个类，反之去掉这个类（这是为什么再次点击能返回到 tablet 页面的原因）。 move类的作用将使页面在切换后移动到其所设置的位置。
现在，我们设计页面的切换效果是单击 tablet 页面中的 next 按钮时，该页面向左移动到屏幕之外，同时wifi页面从屏幕右侧移动到屏幕中央，完成切换过程。
基于上述动画的描述，我们设置 tablet 的 left 属性为 -100%，将其定位到屏幕以外的位置；而 wifi 的left 属性为0。 创建两个 move类，以便于上面的 js 代码的运行：
#tablet.move{
left: -100%;
}
#wifi.move{
left: 0;
}
现在效果如下图：
以上基本上已经完成了页面的转换动画设置，但为了更熟练，我们再来试几个其他效果：
1、修改 left 为 top：设置上下滑动页面：
#tablet{
background: #4ac4aa;
top: 0;
}
#wifi{
background: #ea5634;
top: 100%;
}
#tablet.move{
top: -100%;
}
#wifi.move{
top: 0;
}
2、对页面进行缩放。
使用 transform 中的 scale 方法。方法有两个参数：分别是水平方向和垂直方向的缩放值， 0 代表缩放到最小，1 代表缩放到原始大小。可参见：https://www.w3school.com.cn/css3/css3_2dtransform.asp
#tablet{
background: #4ac4aa;
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
#wifi{
background: #ea5634;
-webkit-transform:scale(0, 0);
transform:scale(0, 0);
}
#tablet.move{
-webkit-transform:scale(0, 0);
transform:scale(0, 0);
}
#wifi.move{
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
3、使用3D动画
可以模仿上面代码，来设计一下3D动画。
#tablet{
background: #4ac4aa;
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
#wifi{
background: #ea5634;
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#tablet.move{
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
#wifi.move{
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
设置了页面绕Y轴旋转，首次切换时 tablet 从 0 度旋转到 -180度隐藏起来， wifi 则从180度旋转到0度完成显示切换。首次切换朝左转圈，然后又朝右转圈。（这里的正负角度值我理解的是旋转的方向）。
只是这样设计会出现一些问题，看下面的效果图：
会发现页面只是一张在旋转，而且还是反的。这是因为，当 tablet 页面翻过去后，把其背面的页面给显示出来。而我们要的是wifi 的页面，也就是说，现在要去掉这个“反面”。这里我们设置 backface-visibility 为hidden,即翻面后隐藏。
- backface-visibility：设置当前页面不面向屏幕时是否可见。对于隐藏旋转后的背面非常有用。https://www.w3school.com.cn/cssref/pr_backface-visibility.asp
article{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
这样设置后，页面变为：
还可以加入 perspective 属性，是旋转效果看起来更加立体：
https://www.w3school.com.cn/cssref/pr_perspective.asp 上面虽说不支持，但是现在浏览器还是可以支持的，对于这个问题，我们先试一试。
body{
-webkit-perspective: 1500px;
perspective: 1500px;
}
4、最后，将3D旋转和缩放结合起来
简单的，就把旋转属性和缩放属性同时设置就行了。这里只需要把之前的整合一下即可。
#tablet{
background: #4ac4aa;
-webkit-transform:rotateY(0deg) scale(1, 1);
transform:rotateY(0deg) scale(1, 1);
}
#wifi{
background: #ea5634;
-webkit-transform:rotateY(180deg) scale(0, 0);
transform:rotateY(180deg) scale(0, 0);
}
#tablet.move{
-webkit-transform:rotateY(-180deg) scale(0, 0);
transform:rotateY(-180deg) scale(0, 0);
}
#wifi.move{
-webkit-transform:rotateY(0deg) scale(1, 1);
transform:rotateY(0deg) scale(1, 1);
}
