Comment obtenir un effet flip en CSS

Comment obtenir un effet de retournement en CSS : créez d'abord un bloc de démonstration et ajoutez-y des attributs de transition et de transformation ; puis ajoutez l'attribut de transition au p qui doit être retourné et enfin, ajoutez des attributs de perspective et de style de transformation ; .

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

En tant que cours obligatoire pour les développeurs front-end , CSS3 peut nous guider Il existe de nombreux effets d'animation de base. Dans ce numéro, nous utiliserons CSS3 pour obtenir l'effet de survol ~

La première étape est très simple. Nous dessinons simplement un carré de démonstration et ajoutons une transition. et transformons-y les attributs :

// 本示例均使用Sass语法
.block {
  width: 200px;
  height: 200px;
  background: brown;
  cursor: pointer;
  transition: 0.8s;
  &:hover {
    transform: rotateY(180deg);
  }
}

Jetons un coup d'œil à l'effet à ce moment :

IciQuoi doit être noté est : L'attribut de transition doit être écrit sur .block au lieu du survol. Si nous écrivons uniquement la transition en survol, il n'y aura aucun effet de transition lorsque la souris sortira. nous écrivons uniquement la transition au survol :

La deuxième étape est plus critique : nous pouvons facilement constater que toujours retourner sur un plan n'est pas assez tridimensionnel, nous devons donc changeons légèrement notre façon de penser - Utilisez 2 couches de nidification p

// html部分
<div class="block">
    <div class="block-in"></div>
</div>

L'effet n'a pas changé pour le moment, comme suit :

À ce stadeL'étape clé 1 est ici : nous avons besoin d'ajouter des attributs de perspective et de style de transformation au calque externe pour ajouter un effet de déformation 3D à l'ensemble de l'animation :

// CSS部分
.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

L'effet final est le suivant :

Final résumons les idées :

1. Lorsque la souris passe sur le calque externe, ajoutez une transformation inversée au calque interne p : rotateY(180deg)

2. Faites attention à ajouter l'attribut de transition au p qui doit être inversé. , au lieu de survoler

3. Ajoutez des attributs de perspective et de style de transformation au p externe pour enfin obtenir l'effet de retournement 3D

Apprentissage recommandé : "css tutoriel vidéo"

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!