懒癌患者的学习记录之课程代码旋转木马（3d旋转效果）-CSDN博客

本文链接：https://blog.csdn.net/timid_lazy/article/details/107216663

旋转木马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);
 }