CSS: 3D carousel effect

Posted May 27, 20202 min read

   css  

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>3D      </title>
    <style type="text/css">
      * {
        margin:0px;
        padding:0px;
      }

      #box {
        width:200px;
        height:300px;
        animation:rotate 20s linear infinite;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto auto;
        transform-style:preserve-3d;
      }

      img {
        width:100%;
        position:absolute;
      }

      img:nth-child(1) {
        transform:rotateY(0) translateZ(600px);
      }

      img:nth-child(2) {
        transform:rotateY(36deg) translateZ(600px);
      }

      img:nth-child(3) {
        transform:rotateY(72deg) translateZ(600px);
      }

      img:nth-child(4) {
        transform:rotateY(108deg) translateZ(600px);
      }

      img:nth-child(5) {
        transform:rotateY(144deg) translateZ(600px);
      }

      img:nth-child(6) {
        transform:rotateY(180deg) translateZ(600px);
      }

      img:nth-child(7) {
        transform:rotateY(216deg) translateZ(600px);
      }

      img:nth-child(8) {
        transform:rotateY(252deg) translateZ(600px);
      }

      img:nth-child(9) {
        transform:rotateY(288deg) translateZ(600px);
      }

      img:nth-child(10) {
        transform:rotateY(324deg) translateZ(600px);
      }

      @keyframes rotate {
        0%{
          transform:rotateX(0) rotateY(0);
        }

        25%{
          transform:rotateX(20deg) rotateY(180deg);
        }

        50%{
          transform:rotateX(0) rotateY(360deg);
        }

        75%{
          transform:rotateX(-20deg) rotateY(540deg);
        }

        100%{
          transform:rotateX(0) rotateY(720deg);
        }
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul>
        <img src="images/img1.jpg" alt="" />
        <img src="images/img2.jpg" alt="" />
        <img src="images/img3.jpeg" alt="" />
        <img src="images/img4.jpeg" alt="" />
        <img src="images/img5.jpg" alt="" />
        <img src="images/img6.jpeg" alt="" />
        <img src="images/img7.jpeg" alt="" />
        <img src="images/img8.jpeg" alt="" />
        <img src="images/img1.jpg" alt="" />
        <img src="images/img2.jpg" alt="" />
      </ul>
    </div>
  </body>
</html>