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旋转效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。