Latest web development tutorials

HTML DOM Style mengubah properti

Gaya Referensi Obyek gaya Objects

contoh

Rotasi elemen div:

document.getElementById("myDIV").style.transform="rotate(7deg)";

Coba »

Definisi dan Penggunaan

mengubah atribut diterapkan pada 2D elemen atau konversi 3D. Properti ini memungkinkan Anda untuk elemen memutar, zoom, memindahkan, atau miring.


Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox dan Internet Explorer 10 dukungan mengubah properti.

Internet Explorer 9 mendukung alternatif lain dari properti atribut bahwa properti msTransform (hanya untuk konversi 2D).

Opera, Chrome dan Safari mendukung alternatif lain dari atribut properti yang WebkitTransform properti (dapat digunakan untuk 3D dan 2D konversi).


tatabahasa

Pengembalian mengubah sifat:

object .style.transform

Pengaturan mengubah sifat:

object .style.transform="none|transform-functions|initial|inherit"

Nilai properti

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

rincian teknis

default: tak satupun
Pengembalian: String mewakili transformasi atribut dari elemen.
versi CSS CSS3


Artikel terkait

Pedoman CSS Referensi: Transform properti


Gaya Referensi Obyek gaya Objects