CSS3D旋转木马效果+图片倒影特效

  width: 800px;

  height: 240px;

  margin: 10% auto;

  perspective: 2000px;

  transform-style: preserve-3d;

  -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));

}



.stage .control {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);

  animation: rotate 30s linear infinite;

}



.stage .control .imgWrap {

  position: absolute;

  width: 400px;

  height: 400px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  transform-style: preserve-3d;

}



.stage .control .imgWrap .img {

  position: absolute;

  width: 500px;

  height: 400px;

  line-height: 400px;

  text-align: center;

  font-size: 120px;

  top: 0;

  left: 0;

  transform-style: preserve-3d;

  transform-origin: 50% 50% 0px;

}



.stage .control .imgWrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.stage .control .imgWrap .img1 {

  transform: rotateY(80deg) translateZ(650px);

}



.stage .control .imgWrap .img2 {

  transform: rotateY(125deg) translateZ(650px);

}



.stage .control .imgWrap .img3 {

  transform: rotateY(170deg) translateZ(650px);

}



.stage .control .imgWrap .img4 {

  transform: rotateY(215deg) translateZ(650px);

}

.stage .control .imgWrap .img5 {

  transform: rotateY(260deg) translateZ(650px);

}



.stage .control .imgWrap .img6 {

  transform: rotateY(305deg) translateZ(650px);

}



.stage .control .imgWrap .img7 {

  transform: rotateY(350deg) translateZ(650px);

}



.stage .control .imgWrap .img8 {

  transform: rotateY(395deg) translateZ(650px);

}



@keyframes rotate {

  0% {

    transform: translateZ(-2000px) rotateY(0deg);

  }



  50% {

    transform: translateZ(-2000px) rotateY(-360deg);

  }



  100% {

    transform: translateZ(-2000px) rotateY(-720deg);

  }

}

<div class="stage">

  <div class="control">

    <div class="imgWrap">

      <div class="img img1">

        <img src="https://img0.baidu.com/it/u=2214479080,1604262907&fm=26&fmt=auto">

      </div>

      <div class="img img2">

        <img src="https://img2.baidu.com/it/u=1388469897,1718297632&fm=26&fmt=auto">

      </div>

      <div class="img img3">

        <img src="https://img2.baidu.com/it/u=2710628136,2929560881&fm=26&fmt=auto">

      </div>

      <div class="img img4">

        <img src="https://img0.baidu.com/it/u=4273904957,3689282097&fm=26&fmt=auto">

      </div>

      <div class="img img5">

        <img src="https://img0.baidu.com/it/u=1861388410,233709208&fm=26&fmt=auto">

      </div>

      <div class="img img6">

        <img src="https://img0.baidu.com/it/u=3481599214,3477277199&fm=26&fmt=auto">

      </div>

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。