CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)

This article introduces CSS to realize three-dimensional three-dimensional rotation infinite carousel animation (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the previous article [How to implement infinite carousel animation in css], we introduced the infinite carousel animation played horizontally (as shown below). In this article, we will build on the previous Modify to implement different carousel animations.

Three-dimensional rotating carousel

With some small changes, we can use different polygon shapes for images wheels, and larger images, resulting in different effects. In this case, the image is twice as large and placed in a triangular arrangement that uses less space. There are still eight identical photos in the sequence:

Using Firefox, you will see that the animation is running as well. In addition to the extra JavaScript code and replacing -webkit with -moz, we have to add -moz-transform-style:preserve-3d; to the #rotator a in the css, because it is not included Inherited (starting with Firefox v12).

This example has a slight change, we are moving the photo from the front of the queue to the back. In the former case, we move them from the back of the queue to the front.

To do this, we will change:

target.insertBefore(arr[arr.length-1], arr[0]);

into:

target.appendChild(arr[0]);

Put the complete code below:

html code:

<div id="stage3">
<div id="rotator3" style="-webkit-animation-name: rotator3; -moz-animation-name: rotator3;">
<a href="1.jpg"><img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="2.jpg"><img  src="/static/imghwm/default1.png"  data-src="2.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="3.jpg"><img  src="/static/imghwm/default1.png"  data-src="3.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="4.jpg"><img  src="/static/imghwm/default1.png"  data-src="4.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="5.jpg"><img  src="/static/imghwm/default1.png"  data-src="5.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="6.jpg"><img  src="/static/imghwm/default1.png"  data-src="6.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="7.jpg"><img  src="/static/imghwm/default1.png"  data-src="7.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="8.jpg"><img  src="/static/imghwm/default1.png"  data-src="8.jpg"  class="lazy"      style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
</div>
</div>

css code:

 #stage3 {
    margin: 2em auto 1em 50%;
    height: 240px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 90px;
    -moz-perspective: 1200px;
    -moz-perspective-origin: 0 90px;
    -ms-perspective: 1200px;
    -ms-perspective-origin: 0 90px;
  }

  #rotator3 a {
    position: absolute;
    left: -151px;
    -moz-transform-style: preserve-3d;
  }
  #rotator3 a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
  }

  #rotator3 a:nth-of-type(1) img {
    -webkit-transform: rotateX(-90deg) translateZ(100px);
    -moz-transform: rotateX(-90deg) translateZ(100px);
    -ms-transform: rotateX(-90deg) translateZ(100px);
  }
  #rotator3 a:nth-of-type(2) img {
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
  }
  #rotator3 a:nth-of-type(3) img {
    -webkit-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    -ms-transform: rotateX(90deg) translateZ(100px);
  }
  #rotator3 a:nth-of-type(n+4) { display: none; }

  @-webkit-keyframes rotator3 {
    from { -webkit-transform: rotateX(0deg);  }
    to   { -webkit-transform: rotateX(90deg); }
  }
  @-moz-keyframes rotator3 {
    from { -moz-transform: rotateX(0deg);  }
    to   { -moz-transform: rotateX(90deg); }
  }
  @-ms-keyframes rotator3 {
    from { -ms-transform: rotateX(0deg);  }
    to   { -ms-transform: rotateX(90deg); }
  }

  #rotator3 {
    -webkit-transform-origin: 0 101px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -moz-transform-origin: 0 101px;
    -moz-transform-style: preserve-3d;
    -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -moz-animation-duration: 2s;
    -moz-animation-delay: 1s;
    -ms-transform-origin: 0 101px;
    -ms-transform-style: preserve-3d;
    -ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -ms-animation-duration: 2s;
    -ms-animation-delay: 1s;
  }
  #rotator3:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
  }

js code:

document.addEventListener("DOMContentLoaded", function() {

    var rotateComplete = function(e) {
      with(target.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "";
      }
      target.insertBefore(arr[arr.length - 1], arr[0]);
      setTimeout(function(el) {
        with(el.style) {
          webkitAnimationName = MozAnimationName = msAnimationName = "rotator3";
        }
      }, 0, target);
    };

    var target = document.getElementById("rotator3");
    var arr = target.getElementsByTagName("a");

    target.addEventListener("webkitAnimationEnd", rotateComplete, false);
    target.addEventListener("animationend", rotateComplete, false);
    target.addEventListener("MSAnimationEnd", rotateComplete, false);

  }, false);

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning.

The above is the detailed content of CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example). For more information, please follow other related articles on the PHP Chinese website!