本身看：https://impress.js.org/#/bored
内容：
HTML部分
1、根元素
<div id="container"><div>
所有法式元素都要包孕在这个根元素中，需要指定id，初始化时使用，如果不指定，impress框架会自行搜索id为impress的元素，如果没有则掉败
2、法式元素
<div id="step1" class="step"> <p>这是第一张</p> <div>
展示内容都要写在法式元素内，每一个法式元素对应一次切换；法式元素必需有.step类，法式元素可以指定id，在自界说事件的时候使用
3、法式元素位置
法式元素的位置全部通过HTML5供给的“data-*”进行设置
<div id="step2" class="step" data-x="-1000" data-y="-1500" data-z="300"> <p>这里展示了法式元素的位置信息如何设置</p> </div>
data-x:相对付法式元素中心位置的X轴偏移量，单位为px
data-y:相对付法式元素中心位置的Y轴偏移量，单位为px
data-z:相对付法式元素中心位置的Z轴偏移量，单位为px
<div id="step3" class="step" data-scale="3"> <p>这里展示了法式元素的缩放如何设置</p> </div>
data-scale:相对付其他法式元素的缩放倍率
<div id="step4" class="step" data-rotate="90"> <p>这里展示了该法式元素的旋转量</p> </div>
data-rotate:设置该法式元素顺时针标的目的的旋转量（就是绕Z轴）
<div id="step5" class="step" data-rotate-x="90"> <p>这里展示了该法式元素绕X轴上的旋转量</p> </div>
data-rotate-x:设置该法式元素绕X轴的旋转量
<div id="step6" class="step" data-rotate-y="90"> <p>这里展示了该法式元素绕Y轴的旋转量</p> </div>
data-rotate-y:设置该法式元素绕Y轴的旋转量
<div id="step7" class="step" data-rotate-z="90"> <p>这里展示了该法式元素绕Z轴的旋转量</p> </div>
data-rotate-z:设置该法式元素绕Z轴的旋转量（和data-rotate效果一样）
<div id="step8" class="step" data-rotate-order="xyz"> <p>这里展示了该法式元素在应用rotate属性时绕x、y、z三个轴向上旋转的先后挨次</p> </div>
data-rotate-order:设置改法式元素在应用rotate属性时绕x、y、z三个轴向上旋转的先后挨次，，默认为“xyz”’，既：先绕X轴旋转，然后是Y轴，最后是Z轴，挨次不一样，最终效果也不一样
注：如果有伴侣搞不清楚X、Y、Z轴向问题，请看下面这张图（图片来源于张鑫旭的小我私家博客，）
CSS部分
1、.past类
.past { display: none; }
已经展示过的法式元素会被添加上此类
2、.present类
.present .rotating { transform: rotate(-10deg); transition-delay: 0.25s; }
当前处于摄像机中心的法式元素会被添加上此类，在添加动画的时候，这个很有用
3、.future类
.future { display: none; }
还未展示过的法式元素会被添加上此类
4、.active类
.step { opacity: 0.3; transition: opacity 1s; } .step.active { opacity: 1 }
当前处于摄像机中心的可见法式元素会被添加上此类
5、.impress-on-*类