旋转木马3d旋转效果
设计思路
一，用大div将需要旋转的元素包裹起来，该大div称之为舞台
123456789
二，为各个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);}
代码效果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
