DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft perspective gibt einem Element einen 3D-Raum, indem sie den Abstand zwischen der Z-Ebene und dem Benutzer beeinflusst.
Die Stärke des Effekts wird durch den Wert bestimmt. Je kleiner der Wert, desto näher kommen Sie der Z-Ebene und desto beeindruckender ist der visuelle Effekt. Je größer der Wert, desto subtiler ist der Effekt.
Wichtig: Bitte beachten Sie, dass die perspective-Eigenschaft nicht beeinflusst, wie das Element gerendert wird; sie aktiviert lediglich einen 3D-Raum für Kindelemente. Dies ist der Hauptunterschied zwischen der Funktion transform: perspective() und der Eigenschaft perspective. Die erste verleiht dem Element Tiefe, während die letztere einen 3D-Raum für alle transformierten Kindelemente schafft.
.parent {
perspective: 1000px;
}
.child {
transform: rotateY(50deg);
}Die obige Demo soll den Unterschied zwischen der Funktion und der Eigenschaft zeigen.
- Auf der linken Seite sehen Sie die Eigenschaft, die auf das übergeordnete Element angewendet wird (
perspective: 50em) von transformierten Elementen (transform: rotateY(50deg)). - Auf der rechten Seite wird die Perspektive direkt aus der Transformation auf Kindelemente angewendet (
transform: perspective(50em) rotateY(50deg)).
Dies zeigt, wie die Anwendung von Perspektive auf das übergeordnete Element dazu führt, dass alle Kindelemente denselben 3D-Raum und somit denselben Fluchtpunkt teilen.
Versuchen wir etwas noch Cooleres: einen Würfel mit 3D-Transformationen und Perspektive.
So wird der Würfel erstellt: Er basiert auf zwei verschachtelten Wrappern (einer, um dem Würfel Perspektive zu geben, und einer, um alle Seiten zu umhüllen) und 6 Elementen für die Seiten. Jedes Element erhält seine eigene Transformation, die Translation und Rotation im 3D-Raum kombiniert (z. B. transform: rotateX(90deg) translateZ(1em)).
Beenden wir dies mit einer Demo, die die Grundlage für ein reales Design zeigen könnte: eine Wand mit Fotografien + Bildunterschriften, die Perspektive und Transformation verwendet.
Beim Überfahren der Wand werden die Kindelemente in ihre normale Position zurückgedreht, wodurch der Effekt aufgehoben wird.
Wichtig! Die Verwendung von perspective (mit einem anderen Wert als 0 oder none) erstellt einen neuen Stapelkontext.
Syntax
perspective: none | <length>;- Initialwert:
none - Gilt für: transformierbare Elemente
- Vererbt: nein
- Prozentwerte: n/v
- Berechneter Wert: das Schlüsselwort
noneoder eine absolute Länge - Animationstyp: nach berechnetem Wert
Werte
/* Keyword value */
perspective: none;
/* Length values */
perspective: 10px;
perspective: 2rem;
/* Global values */
perspective: inherit;
perspective: initial;
perspecive: revert;
perspective: unset;Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 | Alle | 10 1 | 12 2 | 4 2 | 15 2 |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | 3 2 | 3.2 2 | 62 |
1 Firefox 10-15 unterstützt mit Präfix
-moz-2 Chrome 12-35, Safari 4-8, Safari iOS 3.2-8.4, Opera 3.2 und Android Browser 3-4.4.4 unterstützt mit Präfix
-webkit-
Einfach, aber sehr effektiv!
Ich denke, das wird in der zukünftigen Welt des 3D-Designs Bestand haben. :)
Ich weiß, dass ich spät dran bin, aber ich möchte noch etwas hinzufügen
Wenn Sie Compass mit Sass verwenden und den
perspectiveMixin verwenden möchten, sagt man Ihnen, Sie sollen dies tun:@include perspective( perspective );.Laut Compass-Dokumentation ist "...'perspective' eine numernlose Zahl...".
Sie würden also so etwas tun:
@include perspective( 1000 );Das Problem ist, dass dies falsch ist.Damit die Perspektive funktioniert, müssen Sie eine Einheit angeben (px, %, em oder rem).
Wie folgt:
@include perspective( 1000px );Und die Ausgabe wäre
—
Ich beschloss, mich umzusehen, um zu sehen, was andere seriöse Websites über die
perspective-Eigenschaft sagen, und fand einige Dinge herausDieser Artikel auf 24Ways.org liegt falsch. Hinweis: Dieser Artikel ist vom Dezember 2010, daher bin ich mir nicht sicher, ob sich die Spezifikation seitdem geändert hat und jetzt eine Einheit erforderlich ist.
W3Schools.com liegt falsch, natürlich! Nicht nur, dass es falsch ist, weil seine Beispiele keine Einheiten verwenden, sondern noch mehr, weil in der Liste der unterstützten Browser Firefox durchgestrichen ist und wir wissen, dass dies in Firefox einwandfrei funktioniert (auch ohne Vendor-Präfixe). Hinweis: Der Begriff "seriös" trifft offensichtlich nicht auf W3Schools.com zu, das wissen wir mittlerweile alle :)
Wie oben erwähnt, liegt Compass-Dokumentation ebenfalls falsch.
MDN (Mozilla Developer Network) hat es richtig.
Safari Developer Library hat es richtig.
Ich werde dieselbe Information in weniger als 140 Zeichen auf Twitter posten :) – lol
Dort, getwittert.
Alle 140 Zeichen verwendet, lol.
Ich habe diese Seite immer als Referenz für all meine CSS3-Entwicklungen verwendet.
Ich wollte nur meine Arbeit teilen, auch wenn sie einfach ist, ich habe versucht, kreativ damit umzugehen.
http://cybernext.in/Services
Hier habe ich Perspective zweimal verwendet, einmal im Inneren des anderen, um einen besseren 3D-Effekt für das Schild zu erzielen. Ich musste doppelte Hintergründe verwenden
.signboard //hintergrund
{
transform: perspective(1000px);
transform-style: preserve-3d;
}
Dann habe ich Transform und Transition verwendet, um das Schild beim Überfahren zu bewegen
Tolle Arbeit, Mann!
Es tut mir leid, ich kann den Artikel nicht fortsetzen, bis ich weiß, was Sie mit dieser Zeile gemeint haben
Meinten Sie „desto näher kommen Sie der Z-Ebene“ oder „desto weiter entfernen Sie sich von der Z-Ebene“? Was Sie geschrieben haben, ist einfach falsch.
Die hier implizierte Bedeutung ist „desto näher kommen Sie der Z-Ebene“. Es muss ein Tippfehler gewesen sein.
Wenn Sie einen kleineren Wert setzen, z. B. 200, erscheint das Element/3D-Objekt ganz nah und der Effekt wirkt „auffälliger“.
Während, wenn Sie einen größeren Wert setzen, z. B. 1000, scheint sich unsere Ansicht vom Objekt weiter zu entfernen und wir sehen das „größere Bild“. Und als Ergebnis scheint der Effekt nicht so auffällig.
Stellen Sie sich vor, Sie halten einen Würfel 2 cm von Ihrem Gesicht entfernt im Vergleich dazu, ihn in einer Entfernung von 50 cm zu halten. Diese Entfernung entspricht genau dem Wert der Perspektive.
@Vin Danke für die klare Erklärung!
Eigentlich beeinflusst die Perspektive das Rendering in Webkit-Engines. Sie ist normalerweise nicht auf Desktop-Umgebungen zu sehen, aber auf iPhones oder anderen Smartphones mit Retina-Display finden Sie oft ein verschwommenes Rendering Ihrer Kindelemente, ein kleines Beispiel...
Das Bild unten zeigt eine Tabelle, bei der eines der übergeordneten Elemente (.row in diesem Fall) eine Perspektive von ‚none‘ hat. Wie Sie sehen können, ist das Bild scharf und schön.
Das nächste Bild zeigt exakt dieselbe Tabelle, aber bei der das übergeordnete Element (.row) eine Perspektive von 4000 hat, und das Ergebnis, das auf Retina-Displays gerendert wird, ist wirklich anders.
Die Perspektive beeinflusst also definitiv das Rendering!
Es scheint, dass Bilder entfernt wurden :)
Gute Grafik: http://snaps.lucasrolff.com/znk8ypb3hfgdwcs.png
Schlechte Grafik: http://snaps.lucasrolff.com/oocvxlvk2eooar2.png
Leicht verständlich!
Irgendwelche Ideen für einen IE9-Fallback?
IE9 ist veraltet. Verschwenden Sie keine Zeit mehr mit IE9. Sagen Sie Ihrem Kunden, er soll seine Browser aktualisieren.
Sehr hilfreich, Paul, danke.
Geben Sie eine Perspektive zu HTML?
Sehr schöne Erklärung zu ‚perspective‘, dass sie nicht beeinflusst, wie das Element gerendert wird; sie aktiviert einfach einen 3D-Raum für Kindelemente.
Danke!
Was ist mit der
perspective()Funktion. Weiß jemand, welche Browser diese Funktion unterstützen? Ich habe mich ein wenig umgesehen, konnte aber nichts finden.Ein schneller Test deutet darauf hin, dass perspective() in Safari 11, Firefox 58, Chrome 65 und IE11 funktioniert. Obwohl IE11 keine multiplen Transformationen unterstützt, wie sie in der MDN-Demo verwendet werden.
Es ist 2020 und das macht mich verrückt. Danke für die Erklärung!