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

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

东西/原料

• 电脑
• Sublime text 2

方式/步调

1. 1

   架构如下图所示，一个 stage（舞台） 一个 container（容器），容器存放着几个div，作为‘灯笼’的扇面；

   
2. 2

   我们先节制 舞台 和容器 的样式，和设置一些关头属性，perspective 这个设置视距；-webkit-transform-style:preserve-3d；设置为3D（差不多这个意思），然后下面的-webkit-transform：rotateX（-30deg） rotateY（0deg）；扭转一下容器让结果更好一点；

   transition：40s linear；

   这个是关头，设置过渡，别的设置时候 ，是完当作过渡需要的时候，和曲线（具体的可以查资料）

   
3. 3

   然后我们设置一下 小div 的样式和透明度，经由过程 border-radius这个属性将div变为圆形，初步的结果如图二；（因为设置看定位，所以div都重合了）

   
4. 4

   然后我们别离设置，每个小div 的颜色和 扭转角度，经由过程将 div慢慢的散开实现 图二的结果；

   
5. 5

   然后我们再次设置一个悬停事务，触发是容器起头绕 Y 轴动弹，实现灯笼动弹结果；

   
6. 6

   给大师看一下整个 css 的内容，算是一个参考吧，代码的根基格局仍是比力主要的（别的最后的 每个小 div 的样式没有全数截出来，究竟结果上面都有）

   

注重事项

• 小我进修经验，仅作分享；
• 注重浏览器的兼容性；