Beispielcode für reinen CSS-Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts

1. Prozentuale Basis für Elementbreite/-höhe/-polsterung/-rand

Kennen Sie den Richtwert, wenn Sie den Prozentsatz für Breite/Höhe/Polsterung/Rand eines Elements festlegen?

Zum Beispiel:

.übergeordnet {
  Breite: 200px;
  Höhe: 100px;
}
.Kind {
  Breite: 80%;
  Höhe: 80%;
}
.KindKind {
  Breite: 50%;
  Höhe: 50 %;<br> Polsterung: 2 %;<br> Rand: 5 %;<br>
}  

<div Klasse="übergeordnet">
    <div Klasse="Kind">
        <div Klasse="KindKind"></div>
    </div>
</div>

Wie breit ist das untergeordnete Element im obigen Code? Was ist Höhe? Was ist die Polsterung? Wie hoch ist die Marge?

Die Höhe eines Elements basiert prozentual auf der Höhe seines übergeordneten Elements, und die Breite, Polsterung und der Rand eines Elements basieren prozentual auf der Breite seines übergeordneten Elements.

Ich glaube, jeder hat es bereits herausgefunden. Sie können es ausprobieren ~

In Vorstellungsgesprächen stößt man häufig auf eine einfache Frage im CSS-Stil, nämlich die Implementierung eines adaptiven Quadrats. Das Prinzip basiert auf den oben genannten Erkenntnissen. Ich brauche nur

#Kasten {
            Breite: 50%;
            Polsterung oben: 50%;
            Hintergrund: #000;
        }

Da die Basiswerte der Elementbreite und des Abstands die Breite des übergeordneten Elements sind und die Breite des Hauptteils das Browserfenster ist, passt sich diese Einstellung dem Quadrat an, wenn sich die Größe des Browserfensters ändert.

2. Verwenden Sie reines CSS, um den Effekt einer dreidimensionalen Bildplatzierung zu erzielen

Zurück zum Thema: Wenn Sie den dreidimensionalen Platzierungseffekt der in der folgenden Abbildung gezeigten Bilder erzielen möchten, müssen Sie Ihr Wissen über Polsterung, Breite und Höhe anwenden.

Das kommt mir irgendwie bekannt vor. Ist es dem Stil der empfohlenen Bücher in neuer Software ähnlich?

Schauen wir uns hier zunächst die Platzierung an. Ein Bild ist horizontal zentriert und im Vordergrund, während die anderen beiden Bilder links und rechts und etwas weiter hinten ausgerichtet sind, sodass eine dreidimensionale Platzierung entsteht. Hier habe ich eine Möglichkeit kennengelernt, diesen dreidimensionalen Effekt ganz einfach durch den Einsatz von CSS zu erzielen.

Unterstützt werden die unterschiedlichen Höhen durch Polsterauflagen, welche in unterschiedlichen Größen erhältlich sind.

· Die Vorher- und Nachher-Effekte werden durch die Faltreihenfolge des Z-Index gesteuert.

Die Anordnung wird durch das n-te Pseudoelement + Position gesteuert.

Hast Du eine Idee? Reden wir nicht um den heißen Brei herum und kommen wir direkt zum Code.

<html>
    <Kopf>
        <Stil>
            * {
                Rand: 0;
                Polsterung: 0;
            }
            .Kasten {
                Breite: 300px;
                Höhe: 200px;
                Position: relativ;
            }
            .img {
                Breite: automatisch;
                Höhe: 0;
            }
            .box img {
                Breite: 100 %;
                Anzeige: Inline-Block;
            }
            .box .img:n-ter-Typ(1) {
                Anzeige: Inline-Block;
                Position: absolut;
                links: 50%;
                oben: 50 %;
                Polsterung unten: 50 %;
                transformieren: übersetzen(-50 %, -50 %);
                Z-Index: 6;
            }
            .box .img:n-ter-vom-Typ(2), .box .img:n-ter-vom-Typ(3) {
                Position: absolut;
                oben: 50 %;
                transformieren: verschiebeY(-50%);
                Polsterung unten: 63 %;
                Z-Index: 3;
            }
            .box .img:n-ter-Typ(2) {
                rechts: 0;
            }
            .box .img:n-ter-Typ(3) {
                links: 0;
            }
        </Stil>
    </Kopf>
    <Text>
        <div Klasse="Box">
            <div Klasse="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div Klasse="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div Klasse="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
        </div>
    </body>
</html>

Zusammenfassen

Das Obige ist die reine CSS-Methode, die vom Editor eingeführt wurde, um den dreidimensionalen Bildanordnungseffekt zu erzielen. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Unterschied zwischen den Methoden querySelector und getElementById in JS

>>: Detaillierter Prozess zum Kompilieren und Installieren von Storm auf dem Kylin V10-Server

Analyse der Methoden zur visuellen Strukturierung und Gestaltung von Kinder-Websites

Ubuntu installiert scrcpy, um die Bildschirmprojektion und -steuerung des Mobiltelefons abzuschließen (eine weitere Möglichkeit, QQ WeChat in Ubuntu zu verwenden).

Scrcpy-Installation snap install scrcpy Installat...

Beispielcode für reinen CSS-Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts

Analyse der Methoden zur visuellen Strukturierung und Gestaltung von Kinder-Websites

Schaltflächen und Dropdown-Menüs für Studiennotizen in Bootstrap 3.0

HTML-Tabellen-Tag-Tutorial (26): Zellen-Tag

XHTML-Erste-Schritte-Tutorial: XHTML-Tags

Linux Samba-Server – sehr detaillierte Installation und Konfiguration (mit Problemlösung)

SQL-Implementierung von LeetCode (197. Steigende Temperatur)

Verwenden von Textschatten- und Elementschatteneffekten in CSS

So zeigen Sie Dateien im Docker-Image an

Tutorial zur Verwendung von Webpack in JavaScript

Schritte zur vollständigen Deinstallation des Docker-Images

Artikel empfehlen

Detaillierte Schritte zur Installation von MySQL 8.0.27 in Linux 7.6-Binärdateien

JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts

Häufige Fehler bei der Verwendung von React Hooks

Eine kurze Diskussion über die perfekte Anpassungslösung für das mobile Vue-Terminal

Verwendung der VUE-Renderfunktion und ausführliche Erklärung

Erkennung und Lösung von Vue.$set-Fehlerfallen

Vue implementiert einen einfachen Lupeneffekt

Detailliertes Tutorial zum Kompilieren und Installieren von MySQL 8.0.20 aus dem Quellcode

MySQL-Schnellwiederherstellungslösung basierend auf dem Zeitpunkt

HTML+Sass implementiert HambergurMenu (Hamburger-Menü)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 (Win10 64 Bit)

Ubuntu installiert scrcpy, um die Bildschirmprojektion und -steuerung des Mobiltelefons abzuschließen (eine weitere Möglichkeit, QQ WeChat in Ubuntu zu verwenden).

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher

Lösung zum Vergessen des Root-Passworts von MySQL5.7 unter Windows 8.1

CentOS7-Netzwerkkonfiguration unter virtueller VMware-Maschine (Host für drahtlosen Internetzugang)