图片绕Y轴3D转动90度页面事例

今天继续分享 css3 的3D属性可以做到的页面结果，此次是图片绕 Y 轴动弹，这是一个比力根本的结果，实现也比力轻易；

东西/原料

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 的属性节制需要必然的理解，和其他部门的根本常识；