简单的旋转灯笼效果——css3事例

css3 的3D转换可以做到良多不错的页面的结果，此次分享一个，扭转灯笼的3D结果的事例；

东西/原料

1
架构如下图所示，一个 stage（舞台）一个 container（容器），容器存放着几个div，作为‘灯笼’的扇面；
2
我们先节制舞台和容器的样式，和设置一些关头属性，perspective 这个设置视距；-webkit-transform-style:preserve-3d；设置为3D（差不多这个意思），然后下面的-webkit-transform：rotateX（-30deg） rotateY（0deg）；扭转一下容器让结果更好一点；
transition：40s linear；
这个是关头，设置过渡，别的设置时候，是完当作过渡需要的时候，和曲线（具体的可以查资料）
3
然后我们设置一下小div 的样式和透明度，经由过程 border-radius这个属性将div变为圆形，初步的结果如图二；（因为设置看定位，所以div都重合了）
4
然后我们别离设置，每个小div 的颜色和扭转角度，经由过程将 div慢慢的散开实现图二的结果；
5
然后我们再次设置一个悬停事务，触发是容器起头绕 Y 轴动弹，实现灯笼动弹结果；
6
给大师看一下整个 css 的内容，算是一个参考吧，代码的根基格局仍是比力主要的（别的最后的每个小 div 的样式没有全数截出来，究竟结果上面都有）