Maison > Article > interface Web > CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:30:131131parcourir
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/
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：利用css切割图片代码实例_html/css_WEB-ITnoseArticle suivant：gulp系列教程_html/css_WEB-ITnose