Transformationsursprung und Perspektive
Ändern Sie den Drehpunkt von Transforms mit transform-origin und erzeugen Sie mit perspective räumliche Tiefe.
Transformationsursprung und Perspektive ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Standardwert von transform-origin
Standardmäßig erfolgen Transformationen um den Mittelpunkt des Elements: 50% 50%. Die Eigenschaft transform-origin ändert diesen Dreh- und Skalierungsmittelpunkt.
transform-origin festlegen
Akzeptiert Schlüsselwörter, Prozentwerte oder Längen. Format: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin mit Skalierung
Skalierung ausgehend von der oberen linken Ecke (nützlich für Animationen zum Aufklappen von Dropdowns):
<div class="dropdown open">Dropdown menu</div>transform-origin mit Drehung
Drehen Sie einen Uhrzeiger um seinen Ansatzpunkt:
<div class="clock"><div class="hand"></div></div>perspective-Eigenschaft
perspective legt bei 3D-Transformationen den Abstand zwischen Benutzer und der z=0-Ebene fest. Kleinere Werte erzeugen eine stärkere perspektivische Verzerrung, größere Werte eine dezentere Tiefenwirkung.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Ändert den Fluchtpunkt der Perspektive. Standardmäßig ist dies die Mitte (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective als Funktion
perspective() kann auch als Transformationsfunktion direkt auf dem Element verwendet werden, nicht auf dem übergeordneten Element. Dadurch wird der 3D-Kontext auf dieses Element beschränkt.
<div class="card">Card</div>transform-style: preserve-3d
Standardmäßig werden 3D-Transformationen untergeordneter Elemente zu 2D abgeflacht. Setzen Sie transform-style: preserve-3d auf dem übergeordneten Element, damit die echte 3D-Positionierung der Unterelemente erhalten bleibt.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Kartenflip-Effekt
Die klassische Flip-Karte mit perspective und preserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden blendet die Rückseite eines 3D-transformierten Elements aus. Das ist bei Flip-Karten unverzichtbar, wenn die Rückseite nicht durch die Vorderseite hindurch sichtbar sein soll.
Perspektive und Ursprung kombinieren
Ein dramatischer 3D-Neigeeffekt beim Überfahren mit dem Mauszeiger, der auf die Cursorposition reagiert:
<div class="card demo-active">3D Tilt Card</div>Schnelltest
Ein Dropdown verwendet zum Ausblenden transform: scaleY(0) und zum Anzeigen scaleY(1). Welcher transform-origin lässt es von oben nach unten wachsen?
Zusammenfassung
transform-origin ändert den Dreh- und Skalierungsmittelpunkt – entscheidend für das Aufklappen von Dropdowns, Uhrzeiger und Neigeeffekte beim Überfahren. perspective am übergeordneten Element erzeugt den 3D-Tiefenkontext. transform-style: preserve-3d ermöglicht verschachtelte 3D-Elemente. backface-visibility: hidden blendet bei Flip-Effekten die Rückseiten von Elementen aus.
Häufig gestellte Fragen
Ist die Lektion „Transformationsursprung und Perspektive“ kostenlos?
Ja — der vollständige Text von „Transformationsursprung und Perspektive“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Transformationsursprung und Perspektive“?
Ändern Sie den Drehpunkt von Transforms mit transform-origin und erzeugen Sie mit perspective räumliche Tiefe. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Transformationsursprung und Perspektive“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Translate, Rotate und Scale
- Skew- und Matrix-Transforms
- Transformationsursprung und Perspektive
- 3D-Transforms: rotateX, rotateY, translateZ