星空网 > 软件开发 > 网页设计

CSS3实现的3D旋转代码实例

CSS3实现的3D旋转代码实例:
本章节通过代码实例介绍一下CSS3实现的3D旋转效果,css3的出现可以设置更为强大的效果,3D运动效果就是其中的常用效果之一,下面就是一个这样的代码实例,希望能够给需要的朋友带来一定的参考意义。
代码如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">body, div, ul, li{ padding:0; margin:0;}.container ul li{ height:180px; width:180px; margin-right:20px; margin-bottom:20px; display:inline; -webkit-perspective:1000px; -moz-perspective:1000px; float:left;}.out_box{ position:relative; height:180px; width:180px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden;}.out_box div{ display:block; height:180px; width:180px; position:absolute; left:0; top:0; background:#060; text-align:center; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden; color:#FFF; line-height:180px; font-size:16px;}.out_box .front_box {z-index: 2;}.out_box .back_box {z-index: 1;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);}.container ul li:hover .out_box{ -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); transform:rotateY(180deg);}.container ul li:hover .back_box{ z-index:3;}</style></head><body><div class="container"> <ul>  <li>   <div class="out_box">    <div class="front_box">蚂蚁部落一</div>    <div class="back_box">蚂蚁部落二</div>   </div>  </li>  <li>   <div class="out_box">    <div class="front_box">蚂蚁部落一</div>    <div class="back_box">蚂蚁部落二</div>   </div>  </li>  <li>   <div class="out_box">    <div class="front_box">蚂蚁部落一</div>    <div class="back_box">蚂蚁部落二</div>   </div>  </li> </ul></div></body></html>

 

以上代码实现了简单的3D旋转效果,具体如何实现这里就不多介绍了,可以参阅本版块相关的章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13155

更多内容可以参阅:http://www.softwhy.com/divcss/

 




原标题:CSS3实现的3D旋转代码实例

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

奢侈品市场:https://www.goluckyvip.com/tag/12627.html
越南税法修订:https://www.goluckyvip.com/tag/12628.html
深圳专项行动:https://www.goluckyvip.com/tag/12629.html
跨境电商论坛:https://www.goluckyvip.com/tag/1263.html
舱单操作:https://www.goluckyvip.com/tag/12630.html
乌克兰增值税:https://www.goluckyvip.com/tag/12631.html
斥资210万美元,TikTok游说美国参议院阻止法案:https://www.goluckyvip.com/news/188213.html
大家推荐一下厦门三整天一个半天的旅游攻略:https://www.vstour.cn/a/365181.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流