3D旋轉效果程式碼例項

admin發表於2017-04-15
3D

分享一段程式碼例項，它實現了3D旋轉效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.stage{
  perspective: 2000px;
  width: 900px;
  min-height: 100px;
  padding: 100px 0;
  margin: 10px auto;
  position: relative;
}
.stage>ul{
  list-style: none;
  transform-style: preserve-3d;
  position: absolute;
  left: 29%;
  width: 300px;
  height: 200px;
  -webkit-transition: transform .5s;
  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
}
.stage>ul>li{
  position: absolute;
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0px 0px 69px -29px #ddd;
}
.stage>ul>li>img{
  width: 100%;
  height: 100%;
}
.stage>ul>li:nth-child(1) { 
  transform: rotateY(0deg) translateZ(450px);
  background: #E26666; 
}
.stage>ul>li:nth-child(2) { 
  transform: rotateY(  40deg ) translateZ(450px);
  background: #66E296; 
}
.stage>ul>li:nth-child(3) { 
  transform: rotateY(  80deg ) translateZ(450px);
  background: #673AB7;
}
.stage>ul>li:nth-child(4) { 
  transform: rotateY( 120deg ) translateZ(450px);
  background: #CDDC39; 
}
.stage>ul>li:nth-child(5) { 
  transform: rotateY( 160deg ) translateZ(450px);
  background: #03A9F4; 
}
.stage>ul>li:nth-child(6) { 
  transform: rotateY( 200deg ) translateZ(450px);
  background: #607D8B;
}
.stage>ul>li:nth-child(7) { 
  transform: rotateY( 240deg ) translateZ(450px);
  background: #E91E63; 
}
.stage>ul>li:nth-child(8) { 
  transform: rotateY( 280deg ) translateZ(450px);
  background: #FF9800; 
}
.stage>ul>li:nth-child(9) { 
  transform: rotateY( 320deg ) translateZ(450px);
  background: #1900FF; 
}
</style>
<script>
window.onload = function () {
  var indexPiece = 0;
  var cont = document.getElementById('container');
  setInterval(function () {
    cont.style.transform = "rotateY(" + (-40 * ++indexPiece) + "deg)";
  }, 1000);
}                
</script>
</head>
<body>
<div class="stage">
  <ul id="container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>

相關文章