CSS 2D-Transformationen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS 2D-Transformationen

Mit CSS-Transformationen können Sie Elemente verschieben, drehen, skalieren und neigen.

Fahren Sie mit der Maus über das Element unten, um eine 2D-Transformation zu sehen:

2D 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 2D-Transformationsmethoden

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

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Tipp: Im nächsten Kapitel erfahren Sie mehr über 3D-Transformationen.


Die translate()-Methode

Translate

Die Methode translate() verschiebt ein Element von seiner aktuellen Position (gemäß entsprechend den für die X-Achse und die Y-Achse angegebenen Parametern).

Im folgenden Beispiel wird das <div>-Element um 50 Pixel nach rechts verschoben. und 100 Pixel nach unten von der aktuellen Position:

Beispiel

div
{
   
transform: translate(50px, 100px);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>



Die rotate()-Methode

Die Methode rotate() dreht ein Element entsprechend einem bestimmten Grad im oder gegen den Uhrzeigersinn.

Das folgende Beispiel dreht das <div>-Element im Uhrzeigersinn um 20 Grad:

Beispiel

div
{
  transform: rotate(20deg);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>


Durch die Verwendung negativer Werte wird das Element gegen den Uhrzeigersinn gedreht.

Das folgende Beispiel dreht das <div>-Element um 20 Grad gegen den Uhrzeigersinn:

Beispiel

div
{
   
transform: rotate(-20deg);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>




Die scale()-Methode

Scale

Die Methode scale() vergrößert oder verkleinert die Größe eines Elements (entsprechend den angegebenen Parametern für Breite und Höhe).

Das folgende Beispiel vergrößert das <div>-Element auf das Zweifache seiner ursprünglichen Breite und das Dreifache seiner ursprünglichen Höhe:

Beispiel

div
{
   
transform: scale(2, 3);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>


Das folgende Beispiel verkleinert das <div>-Element auf die Hälfte seiner ursprünglichen Breite und Höhe:

Beispiel

div
{
   
transform: scale(0.5, 0.5);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>



Die scaleX()-Methode

Die Methode scaleX() erhöht oder verringert die Breite eines Elements.

Das folgende Beispiel vergrößert das <div>-Element auf das Zweifache seiner ursprünglichen Breite:

Beispiel

div
{
   
transform: scaleX(2);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>


Das folgende Beispiel verkleinert das <div>-Element auf die Hälfte seiner ursprünglichen Breite:

Beispiel

div
{
   
transform: scaleX(0.5);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>



Die scaleY()-Methode

Die Methode scaleY() erhöht oder verringert die Höhe eines Elements.

Das folgende Beispiel vergrößert das <div>-Element auf das Dreifache seines Originals Höhe:

Beispiel

div
{
   
transform: scaleY(3);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>


Das folgende Beispiel verkleinert das <div>-Element auf die Hälfte seines Originals Höhe:

Beispiel

div
{
   
transform: scaleY(0.5);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>



Die skewX()-Methode

Die Methode skewX() neigt ein Element entlang der X-Achse um den angegebenen Winkel.

Das folgende Beispiel neigt das <div>-Element um 20 Grad entlang X-Achse:

Beispiel

div
{
   
transform: skewX(20deg);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>



Die skewY()-Methode

Die Methode skewY() neigt ein Element entlang der Y-Achse um den angegebenen Winkel.

Im folgenden Beispiel wird das <div>-Element um 20 Grad entlang der Y-Achse geneigt:

Beispiel

div
{
   
transform: skewY(20deg);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>



Die skew()-Methode

Die Methode skew() neigt ein Element entlang der X- und Y-Achse um die angegebenen Winkel.

Im folgenden Beispiel wird das <div>-Element um 20 Grad entlang der X-Achse und um 10 Grad entlang der Y-Achse geneigt:

Beispiel

div
{
   
transform: skew(20deg, 10deg);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>


Wenn der zweite Parameter nicht angegeben ist, hat er den Wert Null. Im folgenden Beispiel wird das <div>-Element also um 20 Grad entlang der X-Achse geneigt:

Beispiel

div
{
   
transform: skew(20deg);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>



Die matrix()-Methode

Die Methode matrix() kombiniert alle 2D-Transformationsmethoden in einer.

Die Matrix()-Methode benötigt sechs Parameter, die mathematische Funktionen enthalten. Damit können Sie Elemente drehen, skalieren, verschieben (übersetzen) und neigen.

Die Parameter lauten wie folgt: Matrix(scaleX(), skewY(), skewX(), scaleY(), TranslateX(), TranslateY())

Beispiel

div
{
    
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>




CSS-Transformationseigenschaften

In der folgenden Tabelle sind alle 2D-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

CSS 2D-Transformationsmethoden

matrix(n,n,n,n,n,n)

Definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten

translate(x,y)

Definiert eine 2D-Translation, bei der das Element entlang der X- und Y-Achse verschoben wird

translateX(n)

Definiert eine 2D-Translation, bei der das Element entlang der X-Achse verschoben wird

translateY(n)

Definiert eine 2D-Translation, bei der das Element entlang der Y-Achse verschoben wird

scale(x,y)

Definiert eine 2D-Skalierungstransformation, die die Breite und Höhe der Elemente ändert

scaleX(n)

Definiert eine 2D-Skalierungstransformation, die die Breite des Elements ändert

scaleY(n)

Definiert eine 2D-Skalierungstransformation, die die Höhe des Elements ändert

rotate(angle)

Definiert eine 2D-Rotation, der Winkel wird im Parameter angegeben

skew(x-angle,y-angle)

Definiert eine 2D-Schrägtransformation entlang der X- und der Y-Achse

skewX(angle)

Definiert eine 2D-Schrägtransformation entlang der X-Achse

skewY(angle)

Definiert eine 2D-Schrägtransformation entlang der Y-Achse