在网页中 3D 结果其实就是按照 Ｘ Ｙ Ｚ这三个轴实现的，但究竟结果页面是一个平面，仍是需要一些具体的事例来表现出在页面中图片绕每个轴动弹环境，此次分享的是图片让 Ｚ 轴动弹的事例；
工具/原料
电脑
Sublime
方式/步骤
1
最根本的是页面架构，又有只是简单的事例，所以架构很是简单，舞台（stage），容器（container），一个 img 标签 存放事例图片；
2
然后我们节制关头样式，舞台 stage ，这是展示 3D 结果的处所，就是和它的名字一样；关头的属性 就是 perspective （视距） perspective-origin（视点），其他的大小边框都是按照本身需求可以变更；
3
节制容器， 大小 透明度 之类的都是为了样式都雅；关头是 transform-style：preserver-3d；（让容器变为 3d 容器）；transition:1s linear; （这个是节制过渡结果，让其可以天然的实现动画结果）
4
：hover 这个伪类选择器，就是节制 鼠标触发事务，让 鼠标 移上 容器 ，让容器绕Z轴动弹90度；
5
下面就是 绕Z 轴动弹的结果图，图二是小编本身代码（有瑕疵，可是应该可以实现 正常的结果）
注重事项
小我进修经验，仅作分享；
注重浏览器，3D结果存在兼容性问题；
