CSS 2D-Transformationen
- Vorherige Seite CSS Netzwerk-Schriftarten
- Nächste Seite CSS 3D-Transformationen
CSS 2D-Transformationen
CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。
把鼠标悬停在下面的元素上，可以查看 2D 转换：
在本章中，您将学习如下 CSS 属性：
transform
浏览器支持
表格中的数字指注明了完全支持该属性的首个浏览器版本。
| Eigenschaft | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 2D-Transformationsmethode
通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
提示：您将在下一章中学习 3D 转换。
translate() 方法
translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。
下面的例子将 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：
Beispiel
div {
transform: translate(50px, 100px);
}
rotate() 方法
rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
下面的例子将 <div> 元素顺时针旋转 20 度：
Beispiel
div {
transform: rotate(20deg);
}
使用负值将逆时针旋转元素。
下面的例子将 <div> 元素逆时针旋转 20 度：
Beispiel
div {
transform: rotate(-20deg);
}
scale() 方法
scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。
下面的例子将 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍：
Beispiel
div {
transform: scale(2, 3);
}
下面的例子将 <div> 元素减小为其原始宽度和高度的一半：
Beispiel
div {
transform: scale(0.5, 0.5);
}
scaleX() 方法
scaleX() 方法增加或减少元素的宽度。
下面的例子将 <div> 元素增大为其原始宽度的两倍：
Beispiel
div {
transform: scaleX(2);
}
以下例子将 <div> 元素缩减为其原始宽度的一半：
Beispiel
div {
transform: scaleX(0.5);
}
scaleY() Methode
scaleY() Die Methode erhöht oder verringert die Höhe des Elements.
Der folgende Beispiel vergrößert das <div>-Element auf das Dreifache seiner ursprünglichen Höhe:
Beispiel
div {
transform: scaleY(3);
}
Der folgende Beispiel reduziert das <div>-Element auf die Hälfte seiner ursprünglichen Höhe:
Beispiel
div {
transform: scaleY(0.5);
}
skewX() Methode
skewX() Die Methode neigt das Element entlang der X-Achse um den angegebenen Winkel.
Der folgende Beispiel neigt den <div>-Element entlang der X-Achse um 20 Grad:
Beispiel
div {
transform: skewX(20deg);
}
skewY() Methode
skewY() Die Methode neigt das Element entlang der Y-Achse um den angegebenen Winkel.
Der folgende Beispiel neigt den <div>-Element entlang der Y-Achse um 20 Grad:
Beispiel
div {
transform: skewY(20deg);
}
skew() Methode
skew() Die Methode neigt das Element entlang der X- und Y-Achse um den angegebenen Winkel.
Der folgende Beispiel bewegt den <div>-Element entlang der X-Achse um 20 Grad und entlang der Y-Achse um 10 Grad:
Beispiel
div {
transform: skew(20deg, 10deg);
}
Wenn der zweite Parameter nicht angegeben ist, beträgt der Wert null. Daher bewegt der folgende Beispiel den <div>-Element entlang der X-Achse um 20 Grad:
Beispiel
div {
transform: skew(20deg);
}
matrix() Methode
matrix() Die Methode kombiniert alle 2D-Transformationen zu einer.
matrix() Die Methode akzeptiert sechs Parameter, einschließlich mathematischer Funktionen, die es Ihnen ermöglichen, das Element zu drehen, zu skalieren, zu bewegen (zu verschieben) und zu neigen.
Die Parameter sind wie folgt: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Beispiel
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS-Transformationseigenschaft
Die folgende Tabelle listet alle 2D-Transformationseigenschaften auf:
| Eigenschaft | Beschreibung |
|---|---|
| transform | Wendet eine 2D- oder 3D-Transformation auf das Element an. |
| transform-origin | Ermöglicht die Änderung der Position des transformierten Elements. |
CSS 2D-Transformationsmethode
| Funktion | Beschreibung |
|---|---|
| matrix(n,n,n,n,n,n) | Definiert die 2D-Transformation, indem eine Matrix mit sechs Werten verwendet wird. |
| translate(x,y) | Definiert die 2D-Transformation, bewegt das Element entlang der X- und Y-Achse. |
| translateX(n) | Definiert die 2D-Transformation, bewegt das Element entlang der X-Achse. |
| translateY(n) | Definiert die 2D-Transformation, bewegt das Element entlang der Y-Achse. |
| scale(x,y) | Definiert eine 2D-Zoom-Transformation, die Breite und Höhe des Elements ändert. |
| scaleX(n) | Definiert eine 2D-Zoom-Transformation, die Breite des Elements ändert. |
| scaleY(n) | Definiert eine 2D-Zoom-Transformation, die Höhe des Elements ändert. |
| rotate(Winkel) | Definiert eine 2D-Drehung, in der Parameter die Ecke angeben. |
| skew(x-Winkel,y-Winkel) | Definiert eine 2D-Schräglage-Transformation entlang der X- und Y-Achse. |
| skewX(Winkel) | Definiert eine 2D-Schräglage-Transformation entlang der X-Achse. |
| skewY(Winkel) | Definiert eine 2D-Schräglage-Transformation entlang der Y-Achse. |
- Vorherige Seite CSS Netzwerk-Schriftarten
- Nächste Seite CSS 3D-Transformationen
