Style transform ominaisuus

Määrittely ja käyttö

transform Määrittää 2D- tai 3D-muunnokset elementille. Tämä ominaisuus mahdollistaa elementin kiertämisen, skaalauksen, siirtämisen, vinouttumisen jne.

Lisäksi katso:

CSS viittomakirja:transform-ominaisuus

Esimerkki

Kiertää div-elementtiä:

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

Kokeile itseäsi

Syntaksi

Palauta transform-ominaisuus:

object.style.transform

Aseta transform-ominaisuus:

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

Ominaisuuden arvo

Arvo Kuvaus
none Määritä ei-muunnos.
matrix(n, n, n, n, n, n) Määritä kaksiulotteinen muunnos kuuden arvon matriisin avulla.
matrix3d(n, n, n, n, jne...) Määritä 3D-muunnos 16:n arvon 4x4-matriisin avulla.
translate(x, y) Määritä 2D-translation.
translate3d(x, y, z) Määritä 3D-translation.
translateX(x) Määritä translation, käytä vain X-akselin arvoa.
translateY(y) Määritä translation, käytä vain Y-akselin arvoa.
translateZ(z) Määritä 3D-translation, käytä vain Z-akselin arvoa.
scale(x, y) Määritä 2D-suhteellisuusmuunnos.
scale3d(x, y, z) Määritä 3D-suhteellisuusmuunnos.
scaleX(x) Määritä suhteellisuusmuunnos antamalla X-akselille arvon.
scaleY(y) Määritä suhteellisuusmuunnos antamalla Y-akselille arvon.
scaleZ(z) Määritä 3D-proportionaalimuunnos antamalla Z-akselille arvon.
rotate(kulma) Määritä 2D-kiertomuunnos, määritä kulma parametreissa.
rotate3d(x, y, z, kulma) Määritä 3D-kiertomuunnos.
rotateX(kulma) Määritä 3D-kiertomuunnos X-akselin suuntaan.
rotateY(kulma) Määritä 3D-kiertomuunnos Y-akselin suuntaan.
rotateZ(kulma) Määritä 3D-kiertomuunnos Z-akselin suuntaan.
skew(x-kulma, y-kulma) Määritä 2D-kallistusmuunnos X- ja Y-akselin suuntaan.
skewX(kulma) Määritä 2D-kallistusmuunnos X-akselin suuntaan.
skewY(kulma) Määritä 2D-kallistusmuunnos Y-akselin suuntaan.
perspective(n) Määritä 3D-käännöselementin näkökulma.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltään. Katso inherit.

Tekninen yksityiskohta

Oletusarvo: Ei mitään
Palautusarvo: merkkijono, joka ilmaisee elementin transform-ominaisuus.
CSS-versio: CSS3

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen täysin tukevan kyseisen ominaisuuden selaimen version.

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