CSS transform egenskap
- föregående sida top
- nästa sida transform-origin
Definition och användning
transform-attribut tillämpar 2D eller 3D-omvandling på element. Egenskapen tillåter oss att rotera, skalera, flytta eller luta element.
För att bättre förstå transform-attribut, se dennaDemonstration.
Se också:
CSS3-utbildning:CSS3 2D-omvandling
CSS3-utbildning:CSS3 3D-omvandling
HTML DOM-referenshandbok:transform-attribut
Exempel
Rotera div-element:
div
{
transform:rotate(7deg);
}
Mer exempel finns på sidan botten.
CSS-syntaks
transform: none|transform-funktioner;
Egenskapsvärde
| Värde | Beskrivning | Test |
|---|---|---|
| ingen | Definiera ingen omvandling. | Test |
| matrix(n,n,n,n,n,n) | Definiera 2D-omvandling, använd en matris med sex värden. | Test |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Definiera 3D-omvandling, använd en 4x4-matris med 16 värden. | |
| translate(x,y) | Definiera 2D-omvandling. | Test |
| translate3d(x,y,z) | Definiera 3D-omvandling. | |
| translateX(x) | Definiera omvandling, använd bara värdet för X-axeln. | Test |
| translateY(y) | Definiera omvandling, använd bara värdet för Y-axeln. | Test |
| translateZ(z) | Definiera 3D-omvandling, använd bara värdet för Z-axeln. | |
| scale(x,y) | Definiera 2D-skalningstransformation. | Test |
| scale3d(x,y,z) | Definiera 3D-skalningstransformation. | |
| scaleX(x) | Definiera skalningstransformation genom att sätta värdet för X-axeln. | Test |
| scaleY(y) | Definiera skalningstransformation genom att sätta värdet för Y-axeln. | Test |
| scaleZ(z) | Definiera 3D-skalningstransformation genom att sätta värdet för Z-axeln. | |
| rotate(vinkel) | Definiera 2D-rotation, specificera vinkeln i parametrarna. | Test |
| rotate3d(x,y,z,vinkel) | Definiera 3D-rotation. | |
| rotateX(vinkel) | Definiera 3D-rotation längs X-axeln. | Test |
| rotateY(vinkel) | Definiera 3D-rotation längs Y-axeln. | Test |
| rotateZ(vinkel) | Definiera 3D-rotation längs Z-axeln. | Test |
| skew(x-vinkel,y-vinkel) | Definiera 2D-skalningstransformation längs både X och Y-axeln. | Test |
| skewX(vinkel) | Definiera 2D-skalningstransformation längs X-axeln. | Test |
| skewY(vinkel) | Definiera 2D-skalningstransformation längs Y-axeln. | Test |
| perspective(n) | Definiera perspektivvyn för 3D-omvandlingselement. | Test |
Tekniska detaljer
| Standardvärde: | ingen |
|---|---|
| Ärvnad: | nej |
| Version: | CSS3 |
| JavaScript-syntax: | object.style.transform="rotate(7deg)" |
Mer exempel
- Bilden som släpps på bordet
- Detta exempel visar hur man skapar ett 'Polaroid'-bild och roterar bilden.
Webbläsarstöd
Tal i tabellen anger den första webbläsarens version som helt stöder egenskapen.
Tal med -webkit-, -moz- eller -ms- prefix indikerar den första versionen som använde prefixet.
| egenskap | 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- |
- föregående sida top
- nästa sida transform-origin
