CSS unterstützt auch 3D-Transformationen.
Fahren Sie mit der Maus über die Elemente unten, um den Unterschied zwischen einem 2D-Bild zu sehen und eine 3D-Transformation:
In diesem Kapitel erfahren Sie mehr über die folgende CSS-Eigenschaft:
transform
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Mit der CSS-Eigenschaft transform
können Sie diese verwenden die folgenden 3D-Transformationsmethoden:
rotateX()
rotateY()
rotateZ()
rotateX()
-MethodeDie Methode rotateX()
dreht ein Element um seine X-Achse um einen bestimmten Grad:
#myDiv
{
transform: rotateX(150deg);
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
rotateY()
-MethodeDie Methode rotateY()
dreht ein Element um seine Y-Achse um einen bestimmten Grad:
#myDiv
{
transform: rotateY(150deg);
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
rotateZ()
-MethodeDie Methode rotateZ()
dreht ein Element um seine Z-Achse um einen bestimmten Grad:
#myDiv
{
transform: rotateZ(90deg);
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 90 degrees.
</div>
</body>
</html>
In der folgenden Tabelle sind alle 3D-Transformationseigenschaften aufgeführt:
Wendet eine 2D- oder 3D-Transformation auf ein Element an
Ermöglicht Ihnen, die Position transformierter Elemente zu ändern
Gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden
Gibt die Perspektive an, aus der 3D-Elemente angezeigt werden
Gibt die untere Position von 3D-Elementen an
Definiert, ob ein Element sichtbar sein soll, wenn man nicht auf den Bildschirm schaut
Definiert eine 3D-Transformation unter Verwendung einer 4x4-Matrix mit 16 Werten
Definiert eine 3D-Übersetzung
Definiert eine 3D-Translation, wobei nur der Wert für die X-Achse verwendet wird
Definiert eine 3D-Translation, wobei nur der Wert für die Y-Achse verwendet wird
Definiert eine 3D-Translation, wobei nur der Wert für die Z-Achse verwendet wird
Definiert eine 3D-Skalierungstransformation
Definiert eine 3D-Skalentransformation durch Angabe eines Werts für die X-Achse
Definiert eine 3D-Skalentransformation durch Angabe eines Werts für die Y-Achse
Definiert eine 3D-Skalentransformation durch Angabe eines Werts für die Z-Achse
Definiert eine 3D-Rotation
Definiert eine 3D-Rotation entlang der X-Achse
Definiert eine 3D-Rotation entlang der Y-Achse
Definiert eine 3D-Rotation entlang der Z-Achse
Definiert eine perspektivische Ansicht für ein 3D-transformiertes Element