CSS 3D-Transformationen

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

CSS 3D-Transformationen

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:

<script> var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementById("rotate2D") clearInterval(rotINT) rotINT=setInterval("startRotate()",10) } function rotateYDIV() { y=document.getElementById("rotate3D") clearInterval(rotYINT) rotYINT=setInterval("startYRotate()",10) } function startRotate() { n=n+1 x.style.transform="rotate(" + n + "deg)" x.style.webkitTransform="rotate(" + n + "deg)" x.style.OTransform="rotate(" + n + "deg)" x.style.MozTransform="rotate(" + n + "deg)" if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} } } function startYRotate() { ny=ny+1 y.style.transform="rotateY(" + ny + "deg)" y.style.webkitTransform="rotateY(" + ny + "deg)" y.style.OTransform="rotateY(" + ny + "deg)" y.style.MozTransform="rotateY(" + ny + "deg)" if (ny==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} } }
2D rotate
3D rotate

In diesem Kapitel erfahren Sie mehr über die folgende CSS-Eigenschaft:

  • transform

Browser-Unterstützung

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

CSS 3D-Transformationsmethoden

Mit der CSS-Eigenschaft transform können Sie diese verwenden die folgenden 3D-Transformationsmethoden:

  • rotateX()
  • rotateY()
  • rotateZ()

Die rotateX()-Methode

Die Methode rotateX() dreht ein Element um seine X-Achse um einen bestimmten Grad:

Beispiel

 #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>

Die rotateY()-Methode

Die Methode rotateY() dreht ein Element um seine Y-Achse um einen bestimmten Grad:

Beispiel

 #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>

Die rotateZ()-Methode

Die Methode rotateZ() dreht ein Element um seine Z-Achse um einen bestimmten Grad:

Beispiel

 #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>

CSS-Transformationseigenschaften

In der folgenden Tabelle sind alle 3D-Transformationseigenschaften aufgeführt:

transform

Wendet eine 2D- oder 3D-Transformation auf ein Element an

transform-origin

Ermöglicht Ihnen, die Position transformierter Elemente zu ändern

transform-style

Gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden

perspective

Gibt die Perspektive an, aus der 3D-Elemente angezeigt werden

perspective-origin

Gibt die untere Position von 3D-Elementen an

backface-visibility

Definiert, ob ein Element sichtbar sein soll, wenn man nicht auf den Bildschirm schaut

CSS-3D-Transformationsmethoden

matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Definiert eine 3D-Transformation unter Verwendung einer 4x4-Matrix mit 16 Werten

translate3d(x,y,z)

Definiert eine 3D-Übersetzung

translateX(x)

Definiert eine 3D-Translation, wobei nur der Wert für die X-Achse verwendet wird

translateY(y)

Definiert eine 3D-Translation, wobei nur der Wert für die Y-Achse verwendet wird

translateZ(z)

Definiert eine 3D-Translation, wobei nur der Wert für die Z-Achse verwendet wird

scale3d(x,y,z)

Definiert eine 3D-Skalierungstransformation

scaleX(x)

Definiert eine 3D-Skalentransformation durch Angabe eines Werts für die X-Achse

scaleY(y)

Definiert eine 3D-Skalentransformation durch Angabe eines Werts für die Y-Achse

scaleZ(z)

Definiert eine 3D-Skalentransformation durch Angabe eines Werts für die Z-Achse

rotate3d(x,y,z,angle)

Definiert eine 3D-Rotation

rotateX(angle)

Definiert eine 3D-Rotation entlang der X-Achse

rotateY(angle)

Definiert eine 3D-Rotation entlang der Y-Achse

rotateZ(angle)

Definiert eine 3D-Rotation entlang der Z-Achse

perspective(n)

Definiert eine perspektivische Ansicht für ein 3D-transformiertes Element