Heim > Artikel > Web-Frontend > CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:131132Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：利用css切割图片代码实例_html/css_WEB-ITnoseNächster Artikel：gulp系列教程_html/css_WEB-ITnose