So erzielen Sie einen HTML-Flip-Effekt-HTML-Tutorial-php.cn

So erzielen Sie einen HTML-Flip-Effekt

藏色散人

Freigeben： 2021-06-03 11:12:18

Original

5755 Leute haben es durchsucht

So implementieren Sie den HTML-Flip-Effekt: Überlagern Sie zunächst die beiden anzuzeigenden Bilder mithilfe der Positionierung und verwenden Sie dann die Perspektive von CSS3 in Kombination mit dem Attribut „transform:rateY()“, um den Flip-Effekt zu erzielen.

So erzielen Sie einen HTML-Flip-Effekt

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

CSS3 erzielt einen wunderschönen Kartenumdrehungseffekt

Veröffentlichen Sie zuerst das Rendering (der tatsächliche Effekt ist 1000-mal glatter als das GIF-Bild, Sie können es gerne verwenden):
So erzielen Sie einen HTML-Flip-Effekt
Verwendet hauptsächlich das Perspektive von CSS3 Kombiniert mit dem Attribut transform:ratateY(). Wenn Sie das Perspektive-Attribut für ein Element definieren, erhalten seine untergeordneten Elemente den Perspektiveneffekt, nicht das Element selbst. perspective结合transform:ratateY()属性完成。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。需要注意的是：perspective 属性只影响 3D 转换元素。
这个属性现在在火狐谷歌safari上都得到了较好的支持，W3C.cn上关于该属性的说明还未及时更新。

实现思路就是将两个要展示的p利用定位重叠在一起，其中一个首先围绕Y轴旋转一定角度，还要加上一个关键属性backface-visibility:hiddenEs ist zu beachten
, dass das Perspektive-Attribut nur 3D-Transformationselemente betrifft. So erzielen Sie einen HTML-Flip-Effekt Dieses Attribut wird jetzt in Firefox und Google Safari gut unterstützt. Die Beschreibung dieses Attributs auf W3C.cn wurde nicht rechtzeitig aktualisiert.

Die Implementierungsidee besteht darin, die Positionierung zweier anzuzeigender Ps zu überlappen, von denen eines zunächst um einen bestimmten Winkel um die Y-Achse gedreht wird, und ein Schlüsselattribut backface-visibility:hidden (dieses Attribut Definiert, ob das Element sichtbar ist, wenn es nicht auf den Bildschirm zeigt. Wenn Sie dieses Attribut nicht hinzufügen, wird immer nur eine Karte angezeigt. Die Auswirkung eines Fehlers ist wie folgt:

Der vollständige Code ist unten aufgeführt:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html">
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <title>CSS3实现卡片翻转效果</title>
        <style>
            .re-item {
                width: 220px;
                margin: 50px auto;
                height: 276px;
                cursor: pointer;
                position: relative;
                perspective: 500;
                -webkit-perspective: 500;
            }

            .re-item img {
                max-width: 220px;
            }

            .re-item-front,
            .re-item-back {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #fff;
                -webkit-perspective: 1000;
                /*backface-visibility: hidden;*/
                -webkit-transition: all 1.5s;
                -moz-transition: all 1.5s;
                -ms-transition: all 1.5s;
                -o-transition: all 1.5s;
                box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;
                overflow: hidden;
            }

            .re-item-back {
                position: relative;
                transform: rotateY(-180deg);
                -webkit-transform: rotateY(-180deg);
            }

            .re-item:hover .re-item-front {
                transform: rotateY(-180deg);
                -webkit-transform: rotateY(-180deg);
            }

            .re-item:hover .re-item-back {
                transform: rotateY(-360deg);
                -webkit-transform: rotateY(-360deg);
            }

            .re-box .re-item dd {
                text-align: center;
                font-family: "微软雅黑";
            }

            .re-item .re-item-job {
                margin: 2px 0;
                font-size: 18px;
                color: #303030;
                line-height: 40px;
            }

            .re-item .re-item-des {
                padding: 0 12px;
                font-size: 14px;
                color: #939393;
            }
        </style>
    </head>

    <body>
        <div class="re-box">
            <div class="re-item">
                <dl class="re-item-front">
                    <dt><img src="img/c2.jpg" / alt="coser"></dt>
                    <dd class="re-item-job">coser</dd>
                    <dd class="re-item-des">成为我们的合作coser，漫展返图，自由扩列，以及无偿拍摄&后期服务</dd>
                </dl>

                <div class="re-item-back">
                    <img src="img/c2_1.jpg" alt="苏苏" />
                    <button type="button" class="join_btn open_modal" data-id="2">立即加入</button>
                </div>
            </div>
        </div>
    </body>

</html>

Nach dem Login kopieren

Schauen Sie sich die HTML-Struktur genau an werden nicht benötigt Ja, die kritischste Struktur ist wie folgt. Sie können das CSS auch löschen.

<p class="re-item">
    <p class="re-item-front"></p>
    <p class="re-item-back"></p>
</p>

Nach dem Login kopieren

Mein Implementierungscode ist genau so. Ich habe ihn direkt gepostet, weil ich zu faul bin, ihn zu löschen.

【Empfohlenes Lernen: HTML-Video-Tutorial🎜】🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen HTML-Flip-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!