So erzielen Sie einen 3D-Flip-Effekt in CSS3

In CSS3 können Sie das Transformationsattribut mit 3D-Rotationsfunktionen wie rotierenY() und rotierenX() verwenden, um einen 3D-Flip-Effekt zu erzielen. RotateX() kann ein Element um einen bestimmten Winkel um seine X-Achse drehen, und rotateY() kann ein Element um einen bestimmten Winkel um seine Y-Achse drehen.

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

1. Realisieren Sie das Umdrehen eines Bildes Jeder wird dies tun und den perspektivischen Stil angeben, um den perspektivischen Effekt zu erzielen.

p.flipBox ist ein Container, der das Umdrehen wirklich realisiert. Er wird später in 3D transformiert. Die Figur stellt zwei Bilder dar, eines ist die Vorderseite und das andere die Rückseite

Die Idee ist: Verwenden Sie „figur.front“ und „figur.back“ als Vorder- und Rückseite des gespiegelten Bildes. Nachdem das Bild gespiegelt wurde, wird „figure.back“ zur Seite, die dem Benutzer zugewandt ist, und „figure.front“ zeigt vom Benutzer weg.

Im Ausgangszustand wird „figur.back“ horizontal gespiegelt (d. h. transformieren: rotationY(180deg)), sodass der Text auf der Rückseite nach dem Spiegeln des Bildes aufrecht angezeigt wird (andernfalls steht der Text auf der Rückseite auf dem Kopf). nach dem Umdrehen nach unten - denn umgekehrt war es aufrecht, bevor es umgedreht wurde ~).

• 3. CSS-Struktur

• <div class="stage">
      <div class="flipBox">
          <figure class="pic front">Front</figure>
          <figure class="pic back">Back</figure>
      </div>
  </div>

• Analysieren Sie nun das CSS jedes Elements:

body,figure {
    margin: 0;
    padding: 0;
}
.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front {
    background: #f00;
}
.back {
    background: #090;
    transform: rotateY(180deg);
}

Nichts zu sagen, entfernen Sie die inneren und äußeren Ränder!

body,figure {
    margin: 0;
    padding: 0;
}

Definieren Sie Stile für 3D-Bühnen. Der Rand soll etwas Abstand vom linken und oberen Rand des Browsers haben, damit die Transformation vollständiger dargestellt werden kann. Die Perspektive gibt den Abstand zwischen dem 3D-Element und der Kamera (oder dem menschlichen Auge) an. Je kleiner der Wert, desto näher ist das 3D-Element am menschlichen Auge. Je größer der Wert, desto weiter ist das 3D-Element vom menschlichen Auge entfernt.

.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}

Definieren Sie Stile für umgedrehte Boxen. Dieses Element ist dasjenige, das tatsächlich die 3D-Transformation durchführt. Sein Positionsattribut besteht darin, Ankerpunkte für seine beiden untergeordneten Figurenelemente zu erstellen, sodass die beiden untergeordneten Figurenelemente in der oberen linken Ecke von p.flipBox positioniert werden können, um die beiden Bilder auszurichten. Das Attribut „transform-style“ ist erforderlich, das die Form angibt, in der die untergeordneten Elemente des p.flipBox-Elements in 3D transformiert werden (preserve-3d bedeutet, dass die untergeordneten Elemente weiterhin im 3D-Modus transformiert werden; der andere Wert „flat“ bedeutet nur das). p.flipBox führt eine 3D-Transformation durch, und die untergeordneten Elemente sind nur der Inhalt in der p.flipBox-Ebene ohne 3D-Transformation, was dem Pseudo-3D in After Effect sehr ähnlich ist. Transition gibt an, dass nur das Transformationsattribut transformiert wird und die Zeit 1s beträgt.

.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}

gibt einen einheitlichen Stil für die beiden Bilder (die beiden Figuren hier) an. Verwenden Sie die absolute Positionierung, um die obere linke Ecke von p.flipBox zu positionieren. Die Größen der beiden Figuren sind gleich, sodass sie sich perfekt überlappen. Die Sichtbarkeit der Rückseite ist ein wichtiges Attribut, das angibt, ob das vom Benutzer abgewandte 3D-Element angezeigt werden soll. Andernfalls wird die Rückseite angezeigt, wenn sie nicht angezeigt werden soll. Im Ausgangszustand sollte beispielsweise „figure.back“ offensichtlich nicht angezeigt werden, aber da „figure.back“ nachträglich gerendert wird, wird es „figure.front“ überlagert. Wir haben zuvor „transform: rotationY(180deg)“ für „figure.back“ angegeben. Die Vorderseite ist also vom Benutzer abgewandt und wird nicht angezeigt. In einem anderen Beispiel befindet sich nach dem Umdrehen „figur.front“ vor „figur.back“, aber zu diesem Zeitpunkt zeigt „figur.front“ vom Benutzer weg, sodass es durch „backface-visibility“ verdeckt wird, was genau das ist, was wir wollen.

.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}

gibt an, dass die Vorderseite des Bildes rot sein soll.

.front {
    background: #f00;
}

gibt an, dass die Rückseite des Bildes grün ist. Gleichzeitig gibt transform:rotateY(180deg) an, dass „figur.back“ im Ausgangszustand horizontal um 180° gespiegelt wird.

3. Beginnen Sie mit dem Drehen des Bildes

.back {
    background: #090;
    transform: rotateY(180deg);
}

Wenn sich die Maus in die 3D-Bühne bewegt, drehen Sie die p.flipBox um -180°, um den Effekt des Bildspiegelns zu erzielen. Auch hier ist es möglich, p.flipBox um +180° zu drehen, allerdings ist die Drehrichtung eine andere.

2. Fall

1. Bildvorbereitung

Um HTTP-Anfragen zu reduzieren, werden hier Sprite-Bilder verwendet.

Die Größe des Bildes beträgt 200*200, unterteilt in einen oberen und einen unteren Teil. Der obere Teil ist die Vorderseite des gespiegelten Bildes (Schwarzweiß) und der untere Teil ist die Rückseite des gespiegelten Bildes (Farbe). . Die Logos oben und unten sind horizontal und vertikal zentriert, um sicherzustellen, dass die Logos vor und nach dem Umdrehen an derselben Position sind.

2. Code-Implementierung

.stage:hover .flipBox {
 transform: rotateY(-180deg);
}

(Lernvideo-Sharing:
CSS-Video-Tutorial)

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