3D旋转效果代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了3D旋转效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

3D旋转效果代码实例,这样的场景在实际项目中还是用的比较多的,关于3D旋转效果代码实例就介绍到这了。

3D旋转效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容