css3控制图片绕Z轴转动页面事例

       在网页中 3D 结果其实就是按照 Ｘ　Ｙ　Ｚ这三个轴实现的，但究竟结果页面是一个平面，仍是需要一些具体的事例来表现出在页面中图片绕每个轴动弹环境，此次分享的是图片让　Ｚ　轴动弹的事例；

东西/原料

• 电脑
• Sublime

方式/步调

1. 1

   最根本的是页面架构，又有只是简单的事例，所以架构很是简单，舞台（stage），容器（container），一个 img 标签 存放事例图片；

   
2. 2

   然后我们节制关头样式，舞台 stage ，这是展示 3D 结果的处所，就是和它的名字一样；关头的属性 就是 perspective （视距） perspective-origin（视点），其他的巨细边框都是按照本身需求可以变更；

   
3. 3

   节制容器， 巨细 透明度 之类的都是为了样式都雅；关头是 transform-style：preserver-3d；（让容器变为 3d 容器）；transition:1s linear; （这个是节制过渡结果，让其可以天然的实现动画结果）

   
4. 4

   ：hover 这个伪类选择器，就是节制 鼠标触发事务，让 鼠标 移上 容器 ，让容器绕Z轴动弹90度；

   
5. 5

   下面就是 绕Z 轴动弹的结果图，图二是小编本身代码（有瑕疵，可是应该可以实现 正常的结果）

   

注重事项

• 小我进修经验，仅作分享；
• 注重浏览器，3D结果存在兼容性问题；