Style transform 属性

定义和用法

transform 属性将 2D 或 3D 转换应用于元素。此属性允许您对元素进行旋转、缩放、移动、倾斜等。

另请参阅：

CSS 参考手册：Transformasyon na katangian

实例

旋转 div 元素：

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

}}

Subukan ang iyong sarili

Grammar

I-set ang katangian ng transform:Ibubunga ang katangian ng transform:

.style.transform

I-set ang katangian ng transform:object.style.transform = "none|transform-functions

|initial|inherit"

Halaga ng katangian Halaga
Paglalarawan none
Tinukoy na walang transaksyon.n, n, n, n, n, n) matrix(
Gumamit ng anim na halaga ng matrix upang tinukoy ang dalawang-dimensyonal na transaksyon.n, n, n, nmatrix3d( , atbp....)
Gumamit ng 16 na halaga ng 4x4 na matrix upang tinukoy ang 3D transaksyon.rotate3d(, x) translate(
Tinukoy ang 2D paglipat.rotate3d(, x, y) translate3d(
Tinukoy ang 3D paglipat.rotate3d() translateX(
Tinukoy ang paglipat, na gumagamit lamang ng halaga ng X-aksis.x) translateY(
Tinukoy ang paglipat, na gumagamit lamang ng halaga ng Y-aksis.y) translateZ(
Tinukoy ang 3D paglipat, na gumagamit lamang ng halaga ng Z-aksis.rotate3d(, x) scale(
Tinukoy ang 2D proporsyonal na pag-iikot.rotate3d(, x, y) scale3d(
Tinukoy ang 3D proporsyonal na pag-iikot.rotate3d() scaleX(
Tinukoy ang proporsyonal na pag-iikot sa pamamagitan ng pagbibigay ng isang halaga sa X-aksis.x) scaleY(
Tinukoy ang proporsyonal na pag-iikot sa pamamagitan ng pagbibigay ng isang halaga sa Y-aksis.y) scaleZ(
Tinukoy ang 3D proporsyonal na pag-iikot sa pamamagitan ng pagbibigay ng isang halaga sa Z-aksis.angle) rotate(
Tinukoy ang 2D pagiikot, na tinukoy ang anggulo sa mga argumento.rotate3d(, x, y, angle) z
Tinukoy ang 3D pagiikot.angle) rotateX(
Tinukoy ang 3D pagiikot sa X-aksis.angle) Tinukoy ang 3D pagiikot sa Y-aksis.
rotateZ(angle) Tinukoy ang 3D pagiikot sa Z-aksis.
skew(x-angle, y-angle) Tinukoy ang 2D pagkakalat sa pagkakagaling sa X at Y-aksis.
skewX(angle) Tinukoy ang 2D pagkakalat sa pagkakagaling sa X-aksis.
skewY(angle) Tinukoy ang 2D pagkakalat sa pagkakagaling sa Y-aksis.
Perspective(n) Tinukoy ang perspektibo ng 3D transaksyon na elemento.
Initial I-set ang katangian na ito sa kanyang default na halimbawa. Maaari mong tingnan Initial。
Inherit Mumunukan ang katangian na ito mula sa magulang na elemento. Maaari mong tingnan Inherit。

Detalye ng teknolohiya

Default na halimbawa: Wala
Halimbawa ng bunga: String, na naglalarawan ng Transformasyon na katangian。
Versyon ng CSS： CSS3

Suporta ng browser

Ang mga numero sa talahanayan ay nagtatalaga ng unang bersyon ng browser na ganap na sumusuporta sa katangian na ito.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0