Obtenez un effet de retournement 3D de la carte

Cette fois, je vais vous apporter les précautions pour obtenir l'effet de retournement de carte 3D. Voici les cas réels, jetons un coup d'œil.

Cet article présente l'exemple de code CSS pour obtenir l'effet de retournement 3D de la carte, qui est partagé avec tout le monde. Les détails sont les suivants :

Effet :

.

Code :

html:

<p class="main">
  <p class="box b1"></p>
  <p class="box b2"></p>
</p>

css:

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%,-50%);
  -webkit-perspective: 1500;
  -moz-perspective: 1500;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  transition: all 1s;
  backface-visibility: hidden;
  border-radius: 10px;
  cursor: pointer;
}
.b1{
  background:skyblue;
}
.b2 {
  background:tomato;
  transform: rotateY(-180deg);
}

javascript:

var b1 = document.querySelector(".b1");
var b2 = document.querySelector(".b2");
b1.onclick = function() {
  b1.style.transform = "rotateY(180deg)";
  b2.style.transform = "rotateY(0deg)";
}
b2.onclick = function() {
  b2.style.transform = "rotateY(-180deg)";
  b1.style.transform = "rotateY(0deg)";
}

-webkit-perspective : Effet de perspective

backface-visibility : Masquer l'arrière de l'élément p pivoté

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

h5 implémente plusieurs téléchargements d'aperçus d'images et des contrôles de glissement cliquables

La technologie frontale implémente la superposition de texture de texte

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!