Maison > interface Web > Tutoriel H5 > le corps du texte

Obtenez un effet de retournement 3D de la carte

php中世界最好的语言
Libérer: 2018-03-20 13:52:05
original
6852 Les gens l'ont consulté

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>
Copier après la connexion

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);
}
Copier après la connexion

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)";
}
Copier après la connexion

-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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal