Sifat transform CSS

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性，请查看这个演示。

另请参阅：

CSS3 教程：Transformasi 2D CSS3

CSS3 教程：Transformasi 3D CSS3

HTML DOM 参考手册：transform 属性

实例

旋转 div 元素：

div
{
transform:rotate(7deg);
}

亲自试一试

页面底部有更多实例。

CSS 语法

transform: none|transform-functions;

属性值

值 描述 Pengujian
tiada 定义不进行转换。 Pengujian
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 Pengujian
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) Mendefinikan penukaran 2D. Pengujian
translate3d(x,y,z) Mendefinikan penukaran 3D.
translateX(x) Mendefinikan penukaran, hanya menggunakan nilai sumbu X. Pengujian
translateY(y) Mendefinikan penukaran, hanya menggunakan nilai sumbu Y. Pengujian
translateZ(z) Mendefinikan penukaran 3D, hanya menggunakan nilai sumbu Z.
scale(x,y) Mendefinikan penukaran skala 2D. Pengujian
scale3d(x,y,z) Mendefinikan penukaran skala 3D.
scaleX(x) Mendefinikan penukaran skala dengan mengatur nilai sumbu X. Pengujian
scaleY(y) Mendefinikan penukaran skala dengan mengatur nilai sumbu Y. Pengujian
scaleZ(z) Mendefinikan penukaran skala 3D dengan mengatur nilai sumbu Z.
rotate(sudut) Mendefinikan putar 2D, dalam parameter ditentukan sudut. Pengujian
rotate3d(x,y,z,sudut) Mendefinikan putar 3D.
rotateX(sudut) Mendefinikan putar 3D sepanjang sumbu X. Pengujian
rotateY(sudut) Mendefinikan putar 3D sepanjang sumbu Y. Pengujian
rotateZ(sudut) Mendefinikan putar 3D sepanjang sumbu Z. Pengujian
skew(sudut-x,sudut-y) Mendefinikan penukaran slant 2D sepanjang sumbu X dan Y. Pengujian
skewX(sudut) Mendefinikan penukaran slant 2D sepanjang sumbu X. Pengujian
skewY(sudut) Mendefinikan penukaran slant 2D sepanjang sumbu Y. Pengujian
perspective(n) Untuk menentukan pandangan persepsi bagi elemen transformasi 3D. Pengujian

Perincian teknikal

Nilai lalai: tiada
Warisan: tidak
Versi: CSS3
Rujukan sintaksis JavaScript: objek.style.transform="rotate(7deg)"

Contoh lanjutan

Gambar yang dilempar ke atas meja
Contoh ini memperlihatkan bagaimana untuk membuat gambar 'Polaroid' dan memutar gambar.

Pendukung pereka

Nombor di dalam tabel menunjukkan versi pereka paling awal yang menyokong sifat ini.

Nombor yang diikat dengan -webkit-、-moz- atau -ms- menunjukkan versi pertama yang digunakan dengan prefix.

sifat Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-