CSS transform ominaisuus

Määrittely ja käyttö

transform-ominaisuus soveltaa elementtiin 2D- tai 3D-muunnosta. Tämä ominaisuus mahdollistaa elementin kierrätyksen, skaalauksen, siirtymisen tai kaltevuuden.

Jotta transform-ominaisuuden ymmärtäminen olisi parempaa, katso tämäNäyttö.

Katso myös:

CSS3-opas:CSS3 2D muunnos

CSS3-opas:CSS3 3D muunnos

HTML DOM -viittausoppas:transform-ominaisuus

Esimerkki

Kierrä div-elementtiä:

div
{
transform:rotate(7deg);
}

Kokeile itse

Lisää esimerkkejä sivun alaosassa.

CSS-kieli

transform: none|transform-funktiot;

Atribuuttiarvo

Arvo Kuvaus Testi
ei Määritä ei-muunnos. Testi
matrix(n,n,n,n,n,n) Määritä 2D-muunnos käyttämällä kuuden arvon matriisia. Testi
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Määritä 3D-muunnos käyttämällä 16 arvon 4x4-matriisia.
käännös(x,y) Määritä 2D-käännös. Testi
käännös3d(x,y,z) Määritä 3D-käännös.
käännösX(x) Määritä käännös, käytä vain X-akseksen arvoa. Testi
käännösY(y) Määritä käännös, käytä vain Y-akseksen arvoa. Testi
käännösZ(z) Määritä 3D-käännös, käytä vain Z-akseksen arvoa.
koonmuutos(x,y) Määritä 2D-koonmuutos. Testi
koonmuutos3d(x,y,z) Määritä 3D-koonmuutos.
koonmuutosX(x) Määritä koonmuutos, aseta X-akseksen arvo. Testi
koonmuutosY(y) Määritä koonmuutos, aseta Y-akseksen arvo. Testi
koonmuutosZ(z) Määritä 3D-koonmuutos, aseta Z-akseksen arvo.
kiertokulma(kulma) Määritä 2D-kiertokulma, määritä kulma parametreissa. Testi
kiertokulma3d(x,y,z,kulma) Määritä 3D-kiertokulma.
kiertokulmaX(kulma) Määritä 3D-kiertokulma, joka suuntautuu X-akseliin. Testi
kiertokulmaY(kulma) Määritä 3D-kiertokulma, joka suuntautuu Y-akseliin. Testi
kiertokulmaZ(kulma) Määritä 3D-kiertokulma, joka suuntautuu Z-akseliin. Testi
kallistus(x-kulma,y-kulma) Määritä 2D-kallistus, joka suuntautuu sekä X- että Y-akseliin. Testi
kallistusX(kulma) Määritä 2D-kallistus, joka suuntautuu X-akseliin. Testi
kallistusY(kulma) Määritä 2D-kallistus, joka suuntautuu Y-akseliin. Testi
näkösuhde(n) Määritä 3D-kääntöelementin näkökulma. Testi

Tekninen tarkistus

Oletusarvo: ei
Perintä: ei
Versio: CSS3
JavaScript-syntax: objekti.style.transform="pyöritä(7astea)"

Lisää esimerkkejä

Kuva, joka heitetään pöydälle
Tämä esimerkki näyttää, miten luodaan 'Polaroid'-kuva ja miten kuvaa pyöritetään.

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Numerot, jotka alkavat -webkit-、-moz- tai -ms-, ilmaisevat käyttämäsi etuliitteen ensimmäisen version.

Ominaisuus 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-