Perspektivischer Ursprung - CSS-Tricks

Anonim

Die perspective-originEigenschaft bestimmt den Ursprung für die perspectiveEigenschaft. Betrachten Sie es als den Fluchtpunkt des aktuellen 3D-Raums.

Beachten Sie, dass die perspectiveEigenschaft perspective-originfür das übergeordnete Element definiert werden muss, um den transformierten untergeordneten Elementen Tiefe zu verleihen.

Die perspective-originEigenschaft macht nichts für sich. Es muss zusammen mit einem Element definiert werden perspective.

/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin: 
 |  | 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 er seinen Fluchtpunkt durch Ändern des perspective-originWerts (Konstanten) ändert .

Schauen Sie sich diesen Stift an!

Hey, lass uns den perspektivischen Ursprung animieren, nur zum Spaß!

Schauen Sie sich diesen Stift an!
  1. Es beginnt bei `0% 0 %` (oben links)
  2. Gehen Sie dann zu "100% 0%" (oben rechts)
  3. Dann zu "100% 100%" (unten rechts)
  4. Dann zu "0% 100%" (unten links)
  5. Gehen Sie dann zurück zu 1. und starten Sie neu

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
12 * 10 * 11 12 4 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 3* 3,2 *