CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)-CSS Tutorial-php.cn

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

青灯夜游

Release： 2018-11-07 18:19:52

Original

5601 people have browsed it

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.

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

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:

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

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]);

Copy after login

into:

target.appendChild(arr[0]);

Copy after login

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="1.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
<a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="CSS realizes three-dimensional three-dimensional rotation infinite carousel animation (code example)" ></a>
</div>
</div>

Copy after login

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;
  }

Copy after login

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);

Copy after login

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!