CSS3-Image-Flip-Switching-Fall und Analyse wichtiger Attribute

Beim Umschalten des Bildspiegelns ohne Verwendung von CSS3 wird im Allgemeinen JS zum Implementieren von Animationen verwendet und gleichzeitig die Breite und der linke Teil bzw. die Höhe und der obere Rand des Elements bearbeitet, um den Spiegelungseffekt zu simulieren, und zum entsprechenden Zeitpunkt src oder z- ändern. index implementiert die Bildumschaltung.

Ich habe zufällig die CSS3-Lösung http://www.webhek.com/css-flip/ entdeckt und sie schnell gelernt und wie folgt zusammengefasst

Laden Sie zuerst den Code hoch (die meisten davon werden vom obigen Link kopiert, es gibt große Kompatibilitätsprobleme, verwenden Sie ihn mit Vorsicht)

HTML:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flipper"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 

CSS:

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.flipper </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 触发翻转 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container:hover .flipper</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;

}<span style="color: #800000;">
.front ,.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;
}

• Setzen Sie das Perspektivattribut des gesamten Animationsbereichs auf das äußerste Containerelement.
• Wenn das äußere Containerelement auf ein Mouseover-Ereignis trifft, dreht sich der Container, in dem die Karte gespeichert ist, um 180 Grad. Hier wird auch die Drehzahl gesteuert. Wenn Sie den Rotationswert auf -180 Grad einstellen, handelt es sich um eine umgekehrte Rotation.
• bedeutet, dass die Elemente auf der Vorder- und Rückseite der Karte unbedingt so positioniert sein müssen, dass sie sich gegenseitig in der gleichen Position blockieren. Ihre Backface-Visibility-Eigenschaft ist auf „hidden“ eingestellt, sodass die Rückseite jeder Karte beim Umdrehen nicht sichtbar ist.
• Stellen Sie die Vorderseite der Karte auf einen höheren Z-Index-Wert ein als die Rückseite, sodass die Vorderseite der Karte oben liegt.
• Drehen Sie die hintere Karte um 180 Grad, sodass sie die Rolle der Rückseite übernimmt.

Ende des Kopiervorgangs, es gibt wichtige Kommentare in CSS, die besondere Aufmerksamkeit erfordern.

Das Attribut

Perspektive definiert den Abstand des 3D-Elements von der Ansicht in Pixel. Das intuitive Phänomen besteht darin, dass das innere Element beim Umdrehen über den äußeren Rand hinausläuft. Wenn es nicht geschrieben wird oder der Attributwert 0 ist, ändert es sich nur innerhalb des äußeren Randes.

Und der Attributwert erfordert besondere Aufmerksamkeit, um mit der Breite und Höhe des Elements kompatibel zu sein, das umgedreht werden muss, und es wird übertrieben sein 0. Der Unterschiedseffekt ist in der folgenden Abbildung dargestellt

transform-style: Preserve-3d; Das Attribut transform-style gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden (kopiert von w3cschool).

Sowohl „Flip-Container“ als auch „Flipper“ müssen eingestellt sein. Wenn der „Flip-Container“ nicht eingestellt ist, wird der Überlauf-3D-Effekt nicht angezeigt Rückseite der Vorderseite: sichtbar. Kann den Effekt nicht widerspiegeln.

Was noch frustrierender ist, ist, dass der Transformationsstil nicht einmal in IE11 unterstützt wird.

Es gibt also eine andere IE-kompatible Lösung, die nicht darin besteht, den Container umzudrehen, sondern gleichzeitig die Vorder- und Rückseite umzudrehen. IE unterstützt immer noch die Rückseitensichtbarkeit: versteckt, also ist der Umdrehungseffekt das gleiche wie die vorherige Lösung.

Der HTML-Code lautet wie folgt:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  

Da Vorder- und Rückseite direkt umgedreht werden, wird der Flipper überflüssig und der Flipper wird entfernt.

Der CSS-Code lautet wie folgt (nach vielen Tests haben wir unser Bestes gegeben, um verschiedene Browser zu unterstützen, und Browser, die CSS3-Flip nicht unterstützten, herabgestuft, wobei der Umschalteffekt erhalten blieb)

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    -ms-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">由于内层绝对定位导致高度缺少，这里显式设置了宽高</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container, .front, .back </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">

.flip-container:hover .front </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}<span style="color: #800000;">
.flip-container:hover .back </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

.front, .back </span>{<span style="color: #ff0000;">
    -webkit-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -moz-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -ms-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -moz-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -o-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -ms-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0px</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;
}

Es kann sein, dass oben viel unnötiger Kompatibilitätscode enthalten ist und die Ebene begrenzt ist. Willkommen zum Austausch prägnanterer Schreibmethoden.

Es gibt auch einen kleinen TIPPS Wenn Sie den Mauszeiger verwenden, um das Umdrehen von Elementen in anderen Situationen auszulösen, sollten Sie es wie folgt verwenden: Das übergeordnete Element mit fester Breite und Höhe löst das Umdrehen des untergeordneten Elements aus

<span style="color: #800000;">.outer </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">
.inner </span>{<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;
}<span style="color: #800000;">
.outer:hover .inner</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}

Das direkte Auslösen des Umdrehens des Element-Hovers wie folgt führt zu einem großen Nutzungsproblem, da während des Umdrehvorgangs des Elements der Elementbereich kleiner wird und der Cursor vom Element getrennt wird, sodass das Element wiederhergestellt wird und das Der Schwebeflug wird dazu veranlasst, kleiner zu werden, was zu Ungleichmäßigkeiten führt

<span style="color: #800000;">.inner </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<br>　　transition: 0.6s;
}<span style="color: #800000;">
.inner:hover</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}