CSS3實現的3D旋轉程式碼例項

admin發表於2017-02-11
CSSS33D

本章節通過程式碼例項介紹一下CSS3實現的3D旋轉效果，css3的出現可以設定更為強大的效果，3D運動效果就是其中的常用效果之一，下面就是一個這樣的程式碼例項，希望能夠給需要的朋友帶來一定的參考意義。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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旋轉效果，具體如何實現這裡就不多介紹了，可以參閱本版塊相關的章節。

相關文章