Comment obtenir un effet de retournement 3D de carte avec CSS

Cet article présente principalement l'exemple de code CSS pour obtenir l'effet flip 3D des cartes. J'espère qu'il pourra vous aider.

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

Visibilité de la face arrière : masquer l'arrière de l'élément p pivoté

Recommandations associées :

Album Flip CSS33D

Basé sur texte css3 3D flip effect_html/css_WEB-ITnose

CSS3-3D flip_html/css_WEB-ITnose

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!