CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel).

Dieser Artikel stellt CSS vor, um eine dreidimensionale rotierende Endloskarussell-Animation zu realisieren (Codebeispiel). Ich hoffe, dass er für Sie hilfreich ist.

Im vorherigen Artikel [So implementieren Sie eine unendliche Karussellanimation mit CSS] haben wir die horizontal abgespielte unendliche Karussellanimation vorgestellt (wie unten gezeigt). vorherige Änderung, um verschiedene Karussell-Animationen zu implementieren.

Dreidimensionales rotierendes Karussell

Mit einigen kleinen Änderungen können wir verschiedene Polygonformen für Bildräder und größere Bilder verwenden , was zu unterschiedlichen Effekten führt. In diesem Fall ist das Bild doppelt so groß und in einer dreieckigen Anordnung platziert, die weniger Platz beansprucht. Es gibt noch acht identische Fotos in der Sequenz:

Mit Firefox sehen Sie, dass auch die Animation läuft. Zusätzlich zum zusätzlichen JavaScript-Code und dem Ersetzen von -webkit durch -moz müssen wir -moz-transform-style:preserve-3d zum #rotator a des CSS hinzufügen wird nicht geerbt (ab Firefox v12).

Dieses Beispiel hat eine leichte Wendung: Wir verschieben das Foto von der Vorderseite der Warteschlange nach hinten. Im ersteren Fall verschieben wir sie vom Ende der Warteschlange nach vorne.

Dazu ändern wir:

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

in:

target.appendChild(arr[0]);

Geben Sie den vollständigen Code unten ein:

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 realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></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);

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonCSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!