今天继续分享 css3 的3D属性可以做到的页面结果，此次是图片绕 Y 轴动弹，这是一个比力根本的结果，实现也比力轻易；
工具/原料
- 电脑
- Sublime
方式/步骤
- 1
关于在进修 html 时教员就很是强调架构的主要性这里也是同样的，可是固然这么说，可是这么简单的页面事例，架构必然不会复杂的；小编做的事例只是用‘舞台’（stage）div 包含着 ‘容器’（container），容器存放着我们分辨结果的图片；
- 2
起头设置 css 的样式，在构建 3D 结果的时辰 舞台 的属性设置 是必不成少的，width 和height 这些并不是关头属性，关头是 视距 ‘perspective’和视点 ‘perspective-origin’
- 3
容器的关头属性则是 ‘transform-style’这个界说 3D 的属性；关于 ‘transition：1s liner’则是节制过渡的结果，实现光滑的动画结果，而不是一会儿图片动弹 90 度；（img 这个样式节制则是为了 让图片 div大小一致；）
- 4
然后经由过程 ：hover 这个伪类选择器，实现鼠标悬停节制图片动弹；（这个属性的意思 年夜致是 ‘鼠标悬停到 舞台 div 时 ，容器动弹 90 度’）
- 5
完当作以上的设置之后，就可以实现下图的3D结果，代码量并不年夜，只是关于 3D 的属性节制需要必然的理解，和其他部门的根本常识；
注重事项
- 小我进修经验仅作分享；
