DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die perspective-origin Eigenschaft bestimmt den Ursprung für die perspective Eigenschaft. Betrachten Sie es als den Fluchtpunkt des aktuellen 3D-Raums.
Wie bei der perspective-Eigenschaft muss auch perspective-origin auf dem Elternelement definiert werden, um den transformierten Kindern Tiefe zu verleihen.
Die perspective-origin-Eigenschaft tut für sich allein nichts. Sie muss zusammen mit perspective auf einem Element definiert werden.
/**
* Syntax
* perspective-origin: x-position
* perspective-origin: x-position y-position
*
* perspective-origin: <percentage> | <length> | constants | inherit
*/
.element1 { perspective-origin: 25% 75%; }
.element2 { perspective-origin: 10px 25px; }
.element3 { perspective-origin: left bottom; }Unten sehen Sie eine Demo, die zeigt, wie sich ein 3D-Würfel verhält, wenn sein Fluchtpunkt durch Änderung des Werts von perspective-origin (Konstanten) verändert wird.
Hey, lassen Sie uns perspective-origin animieren, nur zum Spaß!
- Es beginnt bei
0% 0%(oben links) - Dann geht es zu
100% 0%(oben rechts) - Dann zu
100% 100%(unten rechts) - Dann zu
0% 100%(unten links) - Dann zurück zu 1. und wieder von vorne beginnen
Browser-Unterstützung
Diese Browser-Supportdaten stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 12* | 10* | 11 | 12 | 4* |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 3* | 3.2* |
Weitere Ressourcen
perspective-originin den CSS-Spezifikationenperspective-originauf MDNperspectivevon David DeSandro
Das ist ziemlich großartig.
Aus irgendeinem Grund funktioniert das in Chrome auf meinem Arbeitsrechner nicht. Es läuft Chrome 28 unter Ubuntu, und es scheint, als ob keine der 3D-Effekte in dieser Version von Chrome unter Ubuntu funktionieren.
Danke für Ihre gute Arbeit.
Aber ich habe nach dem Lesen Ihres Artikels eine Frage.
Sie sagten in Ihrem Artikel: „Die Eigenschaft perspective-origin bestimmt den Ursprung der Eigenschaft perspective. Betrachten Sie es als den Fluchtpunkt des aktuellen 3D-Raums.“
In der CSS3 3D-Transformationsspezifikation heißt es: „Die Eigenschaft ‚perspective-origin‘ legt den Ursprung für die Eigenschaft perspective fest. Sie legt effektiv die X- und Y-Position fest, an der der Betrachter auf die Kinder des Elements zu blicken scheint.“
Ich denke, Betrachter ist der Blickpunkt. Also, sind der Blickpunkt und der Fluchtpunkt bei 3D-Transformationen identisch? Danke für Ihre Hilfe.