Wie erziele ich mit CSS einen Kartenbild-Flip-Effekt? (Beispiel für Spezialeffekte)

Wenn wir Websites mit mehreren Bildern durchsuchen, ist die alleinige Anzeige statischer Bilder oft zu gewöhnlich. Es ist bei weitem nicht genug, um Benutzer anzulocken. Daher bietet dieser Artikel eine detaillierte Einführung in die Spezialeffekte des CSS-Bildspiegels. Ich hoffe, dass er für Freunde in Not hilfreich ist .

CSS-Flip (Bild) spezifisches Codebeispiel:

HTML-Codeteil

<div class="display back">
            <h3>css图片翻转示例</h3>
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="image">
          <div class="display front">
            <img src="img.jpg" alt="" />
          </div>

CSS-Codeteil:

* {
        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;
      }

Der Effekt des obigen Codes ist wie folgt:

Der CSS-Karten-Flip-Effekt ermöglicht es Ihnen, beide Seiten eines Karteninhalts zu sehen .

Hinweis: Das Perspektiveattribut definiert den Abstand des 3D-Elements von der Ansicht in Pixel. Mit dieser Eigenschaft können Sie die Ansicht des 3D-Elements ändern.

Wenn das Perspektive-Attribut für ein Element definiert ist, erhalten seine untergeordneten Elemente den Perspektiveneffekt, nicht das Element selbst. Die Eigenschaft „Perspektive“ betrifft nur 3D-Transformationselemente.

Mögliche Werte sind:

Zahl Der Abstand des Elements von der Ansicht in Pixel.

keine Standardwert. Gleich wie 0. Es ist keine Perspektive festgelegt.

[Empfohlene verwandte Artikel]

Wie verwende ich CSS, um Bildern einen dreidimensionalen Effekt auf der Seite zu verleihen? (Code tatsächlicher Test)

CSS zum Erzielen eines Bildwechseleffekts

Drei Möglichkeiten zur Bildzentrierung mit CSS

CSS zum Layouten von Bildern

Das obige ist der detaillierte Inhalt vonWie erziele ich mit CSS einen Kartenbild-Flip-Effekt? (Beispiel für Spezialeffekte). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!