CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)

Cet article vous présentera comment réaliser une animation de carrousel infinie à rotation tridimensionnelle avec CSS (exemple de code). Il a une certaine valeur de référence. J'espère que cela sera utile. toi.

Dans l'article précédent [Comment implémenter une animation de carrousel infini avec CSS], nous avons présenté l'animation de carrousel infini jouée horizontalement (comme indiqué ci-dessous). base du précédent Modifier pour implémenter différentes animations de carrousel.

Carrousel rotatif tridimensionnel

Avec quelques petits changements, nous pouvons utiliser différentes formes de polygones pour les roues d'images et des images plus grandes , ce qui entraîne des effets différents. Dans ce cas, l’image est deux fois plus grande et placée dans une disposition triangulaire qui utilise moins d’espace. Il y a encore huit photos identiques dans la séquence :

En utilisant Firefox, vous verrez que l'animation tourne également. En plus du code JavaScript supplémentaire et en remplaçant -webkit par -moz, nous devons ajouter -moz-transform-style:preserve-3d au #rotator a du CSS car il n'est pas hérité (à partir de Firefox v12).

Cet exemple a une légère torsion, nous déplaçons la photo du devant de la file d'attente vers l'arrière. Dans le premier cas, nous les déplaçons du fond de la file d’attente vers le devant.

Pour ce faire, nous allons changer :

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

en :

target.appendChild(arr[0]);

Mettre le code complet ci-dessous :

code html :

<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 réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
<a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
<a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
<a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
<a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
<a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
<a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
<a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)" ></a>
</div>
</div>

code css :

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

code js :

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

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il pourra être utile car l’apprentissage de chacun a aidé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!