So verwenden Sie CSS3, um Bildumdrehungseffekte zu erzielen

CSS3 ist ein integraler Bestandteil des Webdesigns. Unter anderem kann durch die 3D-Konvertierung von CSS3 der Spiegeleffekt von Bildern erreicht werden, der der Webseite Dynamik und Mode verleiht. Werfen wir einen Blick darauf, wie man CSS3-Effekte zum Spiegeln von Bildern implementiert.

Implementierungsschritte

1. Zuerst müssen Sie Bildelemente über HTML-Code einfügen, wie unten gezeigt:

<div class="container">
    <img src="image.jpg" alt="image" />
</div>

wobei Container der Container ist, der zur Aufnahme von Bildern verwendet wird.

2. Als nächstes legen Sie Stile für Container und IMG über den CSS-Code fest, wie unten gezeigt:

.container {
    perspective: 800px;
    /* 把container容器设置成3D透视 */
}
img {
    width: 100%;
    height: 100%;
    /* 设置图片的宽高 */
    position: absolute;
    backface-visibility: hidden;
    /* 隐藏图片的背面 */
    transition: transform .6s ease;
    /* 设置动画效果 */
}

Unter anderem dient das Attribut „perspective“ dazu, den perspektivischen Abstand des Containers festzulegen, und das Attribut „backface-visibility“ wird verwendet, um zu steuern, ob Um die Rückseite des Elements anzuzeigen, wird das Übergangsattribut verwendet, um den Animationseffekt des Bildspiegelns zu erzielen.

3. Stellen Sie dann den Flip-Effekt für das Bild ein. Legen Sie Stile für die Vorder- und Rückseite fest, wie unten gezeigt:

img {
    transform-style: preserve-3d;
    /* 设置为3D */
}
img:hover {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:hover:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

Hier wird das Transformationsattribut verwendet, um den Flip-Winkel festzulegen, und das Inhaltsattribut wird verwendet, um ein virtuelles „Pseudoelement“ hinter dem Element hinzuzufügen, um die Flexibilität zu erhöhen des Stils.

4. Stellen Sie abschließend den Container auf die Perspektive ein und stellen Sie den Spiegelungseffekt für das Bild ein, wie unten gezeigt:

.container:hover img {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
.container:hover img:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

Auf diese Weise wird das Bild in 3D gespiegelt, wenn Sie mit der Maus über den Container fahren.

Zusammenfassung

CSS3-Bildspiegelungseffekte können Webseiten Dynamik und Mode verleihen und sie interessanter und lebendiger aussehen lassen. Mit den oben genannten Schritten können wir ganz einfach CSS3-Bildspiegelungseffekte implementieren.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um Bildumdrehungseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!