Verwenden Sie CSS, um 3D-konvexe und konkave Effekte auf Bildern zu erzielen (konvex aus dem Rahmen heraus oder konkav im Rahmen).

Ⅰ. Problembeschreibung:

Verwenden Sie CSS, um konvexe und konkave 3D-Effekte bei Bildern zu erzielen.

ⅡDer Implementierungsprozess läuft wie folgt ab:

1. Die Anzeigeergebnisse sind:
A. Normale Bilder (sowohl Bild 1 als auch Bild 2 sind normal):

Bildbeschreibung hier einfügen

B. Das Bild 1 ragt aus dem Rahmen heraus, während das Bild 2 normal ist;
Vorgang auslösen: Platzieren Sie die Maus innerhalb des roten Rahmens der Abbildung 1 und das Ergebnis wird angezeigt;

Bildbeschreibung hier einfügen

C. Bild 1 ist normal, Bild 2 ist in den Rahmen eingesunken;
Auslösevorgang: Bewegen Sie die Maus in den roten Rahmen von Abbildung 2, und das Ergebnis wird angezeigt.

Bildbeschreibung hier einfügen

2. Führen Sie die Software VScode aus. Sie können dies durch einen persönlichen Test realisieren.

3. Führen Sie den Code aus:

<!DOCTYPE html>
<html>
<head lang="de">
    <meta charset="UTF-8">
    <Titel></Titel>
    <Stil>
        .wickeln {
            schweben: links;
            Breite: 200px;
            Höhe: 300px;
            Rand: 1px durchgehend rot;
            Rand: 100px 0 0 100px;
            Perspektive: 500px;
            /* 
            „perspective:500px;“ bedeutet: perspektivische Entfernung (Wirkung von kleinen Dingen in der Ferne und großen Dingen in der Nähe);
            Aber nur das Gefühl hat sich verändert, die tatsächliche Größe hat sich nicht verändert;
             */
        }

        .wrap img {
            Übergang: 0,5 s;
        }

        .wrap:nth-child(1):hover img {
            transformieren: übersetzenZ(100px);
            /* „translateZ(100px);“ bedeutet: 100 Pixel in die positive Richtung der Z-Achse verschieben (vertikal zur Außenseite des Bildschirms ist positiv); */
        }

        .wrap:nth-child(2):hover img {
            transformieren: übersetzenZ(-100px);
            /* „translateZ(-100px);“ bedeutet: Verschiebe 100 Pixel in die negative Richtung der Z-Achse (negativ nach innen vertikal auf dem Bildschirm); */
        }
      
    </Stil>
</Kopf>
<Text>

<div Klasse="wrap">
    <img src="bild02.jpg"/>
</div>
<!-- 
    Die src-Adresse in img bezieht sich zu diesem Zeitpunkt auf die Adresse des von Ihnen geladenen Bildes. Wenn sich die Adresse des Bildes und das Codedokument im selben Verzeichnis befinden, kann die Adresse einfach wie der obige Code eingeführt werden.
 -->
<div Klasse="wrap">
    <img src="bild02.jpg"/>
</div>

</body>
</html>

III. Fazit

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS 3D-Konvex- und Konkaveffekte auf Bildern erzielen (die aus dem Rahmen herausragen oder in den Rahmen einsinken). Weitere relevante Inhalte dazu, wie Sie mit CSS 3D-Konvex- und Konkaveffekte erzielen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detaillierte Erklärung der Beziehung zwischen Linux- und GNU-Systemen

>>: Eine kurze Diskussion über die Anpassung mobiler Endgeräte

Drei Beispiele für Node.js-Methoden zum Abrufen von Formulardaten

Verwenden Sie CSS, um 3D-konvexe und konkave Effekte auf Bildern zu erzielen (konvex aus dem Rahmen heraus oder konkav im Rahmen).

Ⅰ. Problembeschreibung:

ⅡDer Implementierungsprozess läuft wie folgt ab:

III. Fazit

Drei Beispiele für Node.js-Methoden zum Abrufen von Formulardaten

Vollständige Analyse des Vue-Diff-Algorithmus

MySQL meldet einen Fehler: Datei kann nicht gefunden werden: './mysql/plugin.frm' Lösung

So ändern Sie das Datenbankdatenspeicherverzeichnis in MySQL

Verstehen Sie JavaScript-Prototypen und Prototypenketten gründlich

Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher

Detaillierte Analyse der MySQL-Indexdatenstruktur

Detaillierte Erklärung zum automatischen Hinzufügen eines Präfix-Plugins nach der CSS3-Verpackung: Autoprefixer

Eine kurze Diskussion über die Lösung von Axios zum Entfernen doppelter Anfragen

CSS erzielt den Effekt, mehrere Elemente an beiden Enden in einer Box auszurichten

Artikel empfehlen

Nachdem Sie die Einführung des CSS-Boxmodells gelesen haben, werden Sie nicht verwirrt sein

Analyse eines MySQL-Deadlock-Szenariobeispiels

So verwenden Sie den VIM-Editor unter Linux

Detaillierte Erläuterung der Verwendung der Cloud-native-Technologie Kubernetes Scheduling Unit Pod

So erzielen Sie mit three.js einen dynamischen 3D-Texteffekt

Unterschiede und Anwendungsbeispiele von for, for...in, for...of und forEach in JS

Lösung für das Problem des MySQL-Threads beim Öffnen von Tabellen

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Erläuterung der Schritte für Tomcat zur Unterstützung des https-Zugriffs

Zusammenfassung der genauen Berechnungen verschiedener Abstände/Scrolldistanzen in einem Fenster

Detaillierte Erklärung, wie Tomcat asynchrone Servlets implementiert

js, um die Rotation von Webseitenbildern zu realisieren

Tutorial zu HTML-Tabellen-Tags (20): Zeilenhintergrund-Farbattribut BGCOLOR

Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode

Verwenden Sie Dockercompose, um eine Springboot-MySQL-Nginx-Anwendung zu erstellen