css3 的3D转换可以做到良多不错的页面的结果 ， 此次分享一个 ， 扭转灯笼 的3D结果的事例；
文章插图
需要这些哦
电脑
Sublime text 2
方式/
1架构如下图所示 ， 一个 stage（舞台） 一个 container（容器） ， 容器存放着几个div ， 作为‘灯笼’的扇面；
文章插图
2我们先节制 舞台 和容器 的样式 ， 和设置一些关头属性 ， perspective 这个设置视距；-webkit-transform-style:preserve-3d；设置为3D（差不多这个意思） ， 然后下面的-webkit-transform：rotateX（-30deg） rotateY（0deg）；扭转一下容器让结果更好一点；
transition：40s linear；
这个是关头 ， 设置过渡 ， 别的设置时候 ， 是完当作过渡需要的时候 ， 和曲线（具体的可以查资料）
文章插图
3【简单的旋转灯笼效果——css3事例】然后我们设置一下 小div 的样式和透明度 ， 经由过程 border-radius这个属性将div变为圆形 ， 初步的结果如图二；（因为设置看定位 ， 所以div都重合了）
文章插图
文章插图
4然后我们别离设置 ， 每个小div 的颜色和 扭转角度 ， 经由过程将 div慢慢的散开实现 图二的结果；
文章插图
文章插图
5然后我们再次设置一个悬停事务 ， 触发是容器起头绕 Y 轴动弹 ， 实现灯笼动弹结果；
文章插图
6给大师看一下整个 css 的内容 ， 算是一个参考吧 ， 代码的根基格局仍是比力主要的（别的最后的 每个小 div 的样式没有全数截出来 ， 究竟结果上面都有）
文章插图
注重事项小我进修经验 ， 仅作分享；
注重浏览器的兼容性；
以上内容就是简单的旋转灯笼效果——css3事例的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 折射角是指什么的夹角 折射角是指什么与什么的夹角啊
- 村晚古诗后两句的情景 村晚后两句描绘了怎样的情景
- 道德经手抄报怎么画简单
- 百度网盘中的文件如何分享给好友
- eigen库怎么安装
- 三国演义中草船借箭的起因是什么 草船借箭的起因是什么
- PPT的功能区/菜单栏/选项卡不见了如何恢复显示
- 华硕Ｋ010拆机
- 手机SM-W2017如何用移动热点中的二维码生成器
- 苹果快手免流怎么设置