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

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

东西/原料

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 轴动弹的结果图，图二是小编本身代码（有瑕疵，可是应该可以实现正常的结果）