Style transform-egenskaben
- Forrige side top
- Næste side transformOrigin
- Gå tilbage til forrige niveau HTML DOM Style Object
Definition og brug
transform Egenskaben anvender 2D eller 3D-omformning på elementet. Denne egenskab giver dig mulighed for at rotere, skalere, flytte, skæve elementet osv.
Se også:
CSS referencemanual:transform-egenskapen
Eksempel
Rotér div-elementet:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
Syntaks
Returner transform-egenskapen:
object.style.transform
Sett transform-egenskapen:
object.style.transform = "none|transform-functions|initial|inherit"
Egenskapsverdi
| Verdi | Beskrivelse |
|---|---|
| none | Definer at det ikke skal være noen konvertering. |
| matrix(n, n, n, n, n, n) | Definer todimensjonal konvertering ved hjelp av en matrix med seks verdier. |
| matrix3d(n, n, n, n, etc....) | Definer 3D-rotasjon ved hjelp av en 4x4-matrix med 16 verdier. |
| translate(x, y) | Definer 2D-flytting. |
| translate3d(x, y, z) | Definer 3D-flytting. |
| translateX(x) | Definer flytting, bruk kun verdien til X-aksen. |
| translateY(y) | Definer flytting, bruk kun verdien til Y-aksen. |
| translateZ(z) | Definer 3D-flytting, bruk kun verdien til Z-aksen. |
| scale(x, y) | Definer 2D-proportionskonvertering |
| scale3d(x, y, z) | Definer 3D-proportionskonvertering. |
| scaleX(x) | Definer proporsjonskonvertering ved å gi en verdi til X-aksen. |
| scaleY(y) | Definer proporsjonskonvertering ved å gi en verdi til Y-aksen. |
| scaleZ(z) | Definer 3D-proportionskonvertering ved å gi en verdi til Z-aksen. |
| rotate(vinkel) | Definer 2D-rotasjon, spesifiser vinkelen i parameterne. |
| rotate3d(x, y, z, vinkel) | Definer 3D-rotasjon. |
| rotateX(vinkel) | Definer 3D-rotasjon langs X-aksen. |
| rotateY(vinkel) | Definer 3D-rotasjon langs Y-aksen. |
| rotateZ(vinkel) | Definer 3D-rotasjon langs Z-aksen. |
| skew(x-vinkel, y-vinkel) | Definer 2D-skjæringskonvertering langs både X- og Y-aksen. |
| skewX(vinkel) | Definer 2D-skjæringskonvertering langs X-aksen. |
| skewY(vinkel) | Definer 2D-skjæringskonvertering langs Y-aksen. |
| perspective(n) | Definer perspektivet for 3D-rotasjonselementer. |
| initial | Sett denne egenskapen til sin standardverdi. Se initial. |
| inherit | Arv denne egenskapen fra foreldrelementet. Se inherit. |
Teknisk detalj
| Standardverdi: | ingen |
|---|---|
| Tilbakeverdi: | en streng som representerer elementets transform-egenskapen. |
| CSS versjon: | CSS3 |
Nettleserstøtte
Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter denne egenskapen.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
- Forrige side top
- Næste side transformOrigin
- Gå tilbage til forrige niveau HTML DOM Style Object
