CSS réalise une animation de carrousel infinie à rotation tridimensionnelle en trois dimensions (exemple de code)-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2018-11-07 18:19:52

original

5609 Les gens l'ont consulté

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.

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

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 :

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

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

Copier après la connexion

en :

target.appendChild(arr[0]);

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!