旋转木马3d旋转效果
设计思路
一,用大div将需要旋转的元素包裹起来,该大div称之为舞台
<div id="d">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
<div class="d8">8</div>
<div class="d9">9</div>
</div>
二,为各个div设置基本属性
#d{
width:500px;
height: 150px;
border:1px solid;
margin:200px auto;
transform-style:preserve-3d;/*设置舞台内为3d效果*/
position:relative;
perspective:1050px;/*视距*/
}
#d div{
width:130px;
height:100px;
background:rgba(0,204,153,0.5);
text-align:center;
line-height:100px;
font-size:36px;
left:180px;
position:absolute;
top:25px;
transition:5s linear;/*过渡效果,动画完成时间,匀速*/
}
三,为每个需要旋转的元素进行定位
.d1{
transform:rotateY(0deg) translateZ(196px);
}
.d2{
transform:rotateY(40deg) translateZ(196px);
}
.d3{
transform:rotateY(80deg) translateZ(196px);
}
.d4{
transform:rotateY(120deg) translateZ(196px);
}
.d5{
transform:rotateY(160deg) translateZ(196px);
}
.d6{
transform:rotateY(200deg) translateZ(196px);
}
.d7{
transform:rotateY(240deg) translateZ(196px);
}
.d8{
transform:rotateY(280deg) translateZ(196px);
}
.d9{
transform:rotateY(320deg) translateZ(196px);
}
四,确定旋转后的位置
#d:hover .d1{
transform:rotateY(360deg) translateZ(196px);
}
#d:hover .d2{
transform:rotateY(400deg) translateZ(196px);
}
#d:hover .d3{
transform:rotateY(440deg) translateZ(196px);
}
#d:hover .d4{
transform:rotateY(480deg) translateZ(196px);
}
#d:hover .d5{
transform:rotateY(520deg) translateZ(196px);
}
#d:hover .d6{
transform:rotateY(560deg) translateZ(196px);
}
#d:hover .d7{
transform:rotateY(600deg) translateZ(196px);
}
#d:hover .d8{
transform:rotateY(640deg) translateZ(196px);
}
#d:hover .d9{
transform:rotateY(680deg) translateZ(196px);
}
代码效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96b144cb45162866e31c0a1d1a30a71f.png)