Comment obtenir un effet de retournement d'image de carte avec CSS ? (Exemple d'effets spéciaux)

Lorsque nous parcourons des sites Web multi-images, l'affichage d'images statiques seul est souvent trop ordinaire. C'est loin d'être suffisant pour attirer les utilisateurs. Les animations CSS intéressantes sont plus accrocheuses. Cet article fournit donc une introduction détaillée aux effets spéciaux du retournement d'images CSS. Il a une certaine valeur de référence et j'espère qu'il sera utile aux amis dans le besoin. .

Exemple de code spécifique CSS Flip (image) :

Partie de code HTML

<div class="display back">
            <h3 id="css图片翻转示例">css图片翻转示例</h3>
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="image">
          <div class="display front">
            <img src="/static/imghw/default1.png"  data-src="img.jpg"  class="lazy"   alt="" />
          </div>

code CSS Partie :

* {
        padding: 0;
        margin: 0;
      }
      body {
        background-color: rgb(244, 244, 244);
      }
    
      .wrap {
        -webkit-perspective:400;
        -moz-perspective:400;
        float: left;
        width: 220px;
        margin-right: 20px;
      }
      .image {
        width: 100%;
        height: 200px;
        -webkit-transform-style:preserve-3d;
        -webkit-transition:1.5s;
        -moz-transform-style:preserve-3d;
        -moz-transition:1.5s;
      }
      img {
        width: 220px;
        height: 200px;
      }
      .wrap:hover .image {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
      }
      .display {
        position: absolute;
        -webkit-backface-visibility:hidden;
        -moz-backface-visibility:hidden;
      }
      .display h3 {
        color: white;
        text-align: center;
      }
      .back {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        background: -webkit-gradient(linear,left top,left bottom,from(#fdbb5a), to(#db5726));
        background: -moz-linear-gradient(top,#fdbb5a,#db5726);
        width: 220px;
        height: 200px;
        line-height: 200px;
      }

L'effet du code ci-dessus est le suivant :

effet de retournement de carte CSS, qui vous permet de voir un Contenu de la carte des deux côtés.

Remarque : L'attribut perspective définit la distance de l'élément 3D à la vue, en pixels. Cette propriété vous permet de modifier la vue de l'élément 3D.

Lorsque l'attribut perspective est défini pour un élément, ses éléments enfants obtiennent l'effet de perspective, pas l'élément lui-même. La propriété perspective affecte uniquement les éléments de transformation 3D.

Les valeurs possibles sont :

nombre La distance de l'élément à la vue, en pixels.

aucun Valeur par défaut. Identique à 0. Aucune perspective n’est fixée.

[Articles connexes recommandés]

Comment utiliser le CSS pour que les images aient un effet tridimensionnel sur la page (Test du code réel)

CSS pour obtenir un effet de changement d'image

Trois façons d'obtenir un centrage d'image avec CSS

CSS pour mettre en page des images

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!