网维联盟

当前位置:   网站首页 >> 工作随笔

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>



亲!有什么想法呢?
  • 流泪

    0

  • 打酱油

    0

  • 开心

    0

  • 鼓掌

    0

  • 恐怖

    0