Comment retourner sans effort une carte 3D en utilisant Pure CSS ?

Retournez une carte 3D avec CSS, sans effort

Retourner des cartes avec des effets 3D accrocheurs peut améliorer l'expérience utilisateur. Dans cet article, nous allons nous plonger dans la création d'une animation de retournement de carte activée par le survol en utilisant uniquement CSS.

Pour commencer, examinons un exemple de code qui simplifie la mise en œuvre tout en conservant l'effet escompté :

.card {<br> position : relative;<br> largeur : 50vh;<br> hauteur : 80vh;<br>perspective: 500px;<br>marge: 10vh auto 50vh;<br>}</p>
<p>.front,<br>.back {<br> position: absolue;<br>largeur: 100%;<br> hauteur : 100%;<br> transition : transformation 1s;<br> visibilité de la face arrière : cachée;<br> style de transformation : préserver-3d;<br>}</p>
<p>. front {<br> couleur d'arrière-plan : #66ccff;<br>}</p>
<p>.back {<br> couleur d'arrière-plan : #dd8800;<br> transformation : rotationY(180deg);<br>}</p>
<p>.card:hover .front {<br> transformation : rotationY(180deg);<br>}</p>
<p>.card:hover .back {<br> transformation : rotationY(360deg);<br>}

<div class="card"><br> <div class=" front"<span>Front</span></div><br> <div class="back"><span>Arrière</span></div><br>< /div>

Ce code crée une carte à deux faces : Recto et Verso. L'effet flip se déclenche au survol. En survolant la carte, la face avant pivotera de 180 degrés et la face arrière de 360 ​​degrés.

La clé de cette animation réside dans la combinaison de propriétés CSS telles que la perspective, le style de transformation, la transformation et transition. Ces propriétés fonctionnent ensemble pour créer l'illusion d'un objet 3D.

En implémentant ce code, vous pouvez désormais créer de superbes et attrayants effets de retournement de carte 3D sur votre site Web, améliorant ainsi l'attrait visuel et l'interaction des utilisateurs.

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!