CSS 2D transformasjoner

CSS 2D transformasjoner

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

把鼠标悬停在下面的元素上，可以查看 2D 转换：

2D rotate

在本章中，您将学习如下 CSS 属性：

  • transform

浏览器支持

表格中的数字指注明了完全支持该属性的首个浏览器版本。

Egenskab Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D-omregningsmetoder

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

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

提示：您将在下一章中学习 3D 转换。

translate() 方法

Translate

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

Eksempel

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

Prøv det selv

rotate() 方法

Rotate

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把 <div> 元素顺时针旋转 20 度：

Eksempel

div {
  transform: rotate(20deg);
}

Prøv det selv

使用负值将逆时针旋转元素。

下面的例子把 <div> 元素逆时针旋转 20 度：

Eksempel

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

Prøv det selv

scale() 方法

Scale

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍：

Eksempel

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

Prøv det selv

下面的例子把 <div> 元素减小为其原始宽度和高度的一半：

Eksempel

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

Prøv det selv

scaleX() 方法

scaleX() 方法增加或减少元素的宽度。

下面的例子把 <div> 元素增大为其原始宽度的两倍：

Eksempel

div {
  transform: scaleX(2);
}

Prøv det selv

以下例子把 <div> 元素缩减为其原始宽度的一半：

Eksempel

div {
  transform: scaleX(0.5);
}

Prøv det selv

scaleY() metode

scaleY() Metoden øger eller reducerer elementets højde.

Følgende eksempel forøger <div>-elementets højde til tre gange dens oprindelige højde:

Eksempel

div {
  transform: scaleY(3);
}

Prøv det selv

Følgende eksempel reducerer <div>-elementets højde til halvdelen af dens oprindelige højde:

Eksempel

div {
  transform: scaleY(0.5);
}

Prøv det selv

skewX() metode

skewX() Metoden gør elementet skævt langs X-aksen med den angivne vinkel.

Følgende eksempel gør <div>-elementet skævt langs X-aksen med 20 grader:

Eksempel

div {
  transform: skewX(20deg);
}

Prøv det selv

skewY() metode

skewY() Metoden gør elementet skævt langs Y-aksen med den angivne vinkel.

Følgende eksempel gør <div>-elementet skævt langs Y-aksen med 20 grader:

Eksempel

div {
  transform: skewY(20deg);
}

Prøv det selv

skew() metode

skew() Metoden gør elementet skævt langs X og Y-aksen med den angivne vinkel.

Følgende eksempel gør <div>-elementet skævt langs X-aksen med 20 grader, samtidig som det skæves langs Y-aksen med 10 grader:

Eksempel

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

Prøv det selv

Hvis den anden parameter ikke er specificeret, er værdien nul. Derfor gør følgende eksempel <div>-elementet skævt langs X-aksen med 20 grader:

Eksempel

div {
  transform: skew(20deg);
}

Prøv det selv

matrix() metode

Rotate

matrix() Metoden kombinerer alle 2D-omregningsmetoder i én.

matrix() Metoden accepterer seks parametre, herunder matematikfunktioner, som gør det muligt at rotere, skalere, flytte (translere) og skæve elementet.

Parameterne er som følger: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Eksempel

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

Prøv det selv

CSS omregningsegenskaber

Følgende tabel viser alle 2D-omregningsegenskaber:

Egenskab Beskrivelse
transform Anvend 2D eller 3D-omregning på elementet.
transform-origin Lad dig ændre placeringen af det omregnede element.

CSS 2D-omregningsmetoder

Funktion Beskrivelse
matrix(n,n,n,n,n,n) Definér 2D-omregning ved hjælp af en seks værdier matrix.
translate(x,y) Definér 2D-omregning, flyt elementet langs X og Y-aksen.
translateX(n) Definér 2D-omregning, flyt elementet langs X-aksen.
translateY(n) Definér 2D-omregning, flyt elementet langs Y-aksen.
scale(x,y) Definerer en 2D skaleringstransformasjon, endrer elementets bredde og høyde.
scaleX(n) Definerer en 2D skaleringstransformasjon, endrer elementets bredde.
scaleY(n) Definerer en 2D skaleringstransformasjon, endrer elementets høyde.
rotate(vinkel) Definerer en 2D rotasjon, i parameteren spesifiserer vinkelen.
skew(x-vinkel,y-vinkel) Definerer en 2D skjevhetstransformasjon, langs både X og Y aksene.
skewX(vinkel) Definerer en 2D skjevhetstransformasjon, langs X-aksen.
skewY(vinkel) Definerer en 2D skjevhetstransformasjon, langs Y-aksen.