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

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

东西/原料

• 电脑
• Sublime

方式/步调

1. 1

   关于在进修 html 时教员就很是强调架构的主要性这里也是同样的，可是固然这么说，可是这么简单的页面事例，架构必然不会复杂的；小编做的事例只是用‘舞台’（stage）div 包含着 ‘容器’（container），容器存放着我们分辨结果的图片；

   
2. 2

   起头设置 css 的样式，在构建 3D 结果的时辰 舞台 的属性设置 是必不成少的，width 和height 这些并不是关头属性，关头是 视距 ‘perspective’和视点 ‘perspective-origin’

   
3. 3

   容器的关头属性则是 ‘transform-style’这个界说 3D 的属性；关于 ‘transition：1s liner’则是节制过渡的结果，实现光滑的动画结果，而不是一会儿图片动弹 90 度；（img 这个样式节制则是为了 让图片 div巨细一致；）

   
4. 4

   然后经由过程 ：hover 这个伪类选择器，实现鼠标悬停节制图片动弹；（这个属性的意思  年夜致是 ‘鼠标悬停到 舞台 div 时 ，容器动弹 90 度’）

   
5. 5

   完当作以上的设置之后，就可以实现下图的3D结果，代码量并不年夜，只是关于 3D 的属性节制需要必然的理解，和其他部门的根本常识；

   

注重事项

• 小我进修经验仅作分享；