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:
B. Das Bild 1 ragt aus dem Rahmen heraus, während das Bild 2 normal ist;
C. Bild 1 ist normal, Bild 2 ist in den Rahmen eingesunken;
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. FazitDies 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
Artikel empfehlen
WEB Standard-Webseitenstruktur
Ob es sich nun um das Hintergrundbild oder die Tex...
Einführung in Docker-Container
1. Übersicht 1.1 Grundlegende Konzepte: Docker is...
MySQL query_cache_type-Parameter und Verwendungsdetails
Der Zweck der Einrichtung eines MySQL-Abfragecach...
So erstellen Sie ein CentOS-Basisimage
Vorwort Derzeit ist das von meiner Firma verwende...
Implementierung der Vorschaufunktion mehrerer Bild-Uploads auf HTML-Basis
Ich habe vor kurzem ein Skript zum Hochladen mehr...
Probleme und Lösungen bei der Verwendung des V-Modells zum bidirektionalen Binden der Werte von übergeordneten und untergeordneten Komponenten in Vue
Inhaltsverzeichnis Szenario Versuchen Sie zu löse...
Zusammenfassung der Ausnahmen bei der MySQL-Datenbankverbindung (sammelwürdig)
Beim Bereitstellen des Projekts auf Centos ist mi...
Beispielcode zur Implementierung einer Schaltfläche mit Hintergrundverlauf mithilfe von Div+CSS3
Da die Nachfrage nach Front-End-Seiten weiter ste...
Detaillierte Erläuterung zum Erstellen und Aufrufen von gespeicherten MySQL-Prozeduren
Inhaltsverzeichnis Vorwort Gespeicherte Prozedur:...
So bereinigen Sie Ihre Docker-Daten vollständig
Inhaltsverzeichnis Regelmäßig beschneiden Spiegel...
Über das Problem der vertikalen Zentrierung von img und span in div
Wie unten dargestellt: XML/HTML-CodeInhalt in die...
So implementieren Sie einen variablen Ausdrucksselektor in Vue
Inhaltsverzeichnis Definieren der HTML-Struktur E...
Analyse von Beispielen für MySQL-Benutzerverwaltungsvorgänge
Dieser Artikel beschreibt die MySQL-Benutzerverwa...
Von Vue berechnete Eigenschaften
Inhaltsverzeichnis 1. Grundlegende Beispiele 2. B...
Sequentielles und zufälliges Schreiben auf Linux-Festplatten
1. Einleitung ● Zufälliges Schreiben führt dazu, ...