Home > Article > Web Front-end > CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:131132browse
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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：利用css切割图片代码实例_html/css_WEB-ITnoseNext article：gulp系列教程_html/css_WEB-ITnose