CSS transform eigenschap
- vorige pagina top
- volgende pagina transform-origin
Definitie en gebruik
De transform-eigenschap toepassen op elementen met 2D of 3D transformaties. Deze eigenschap staat ons toe om elementen te roteren, te schalen, te verplaatsen of te kantelen.
Om de transform-eigenschap beter te begrijpen, bekijk dezeDemonstratie.
Zie ook:
CSS3 cursus:CSS3 2D transformatie
CSS3 cursus:CSS3 3D transformatie
HTML DOM referentiehandleiding:transform-eigenschap
Voorbeeld
Rooster div-element:
div
{
transform:rotate(7deg);
}
Meer voorbeelden aan de onderkant van de pagina.
CSS syntaxis
transform: none|transform-functies;
Eigenschapswaarde
| Waarde | Beschrijving | test |
|---|---|---|
| geen | Definieer geen transformatie. | test |
| matrix(n,n,n,n,n,n) | Definieer 2D transformatie, gebruikmakend van een matrix met zes waarden. | test |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Definieer 3D transformatie, gebruikmakend van een 4x4 matrix met 16 waarden. | |
| verschuiven(x,y) | definieer een 2D-transformatie. | test |
| verschuiven3d(x,y,z) | definieer een 3D-transformatie. | |
| verschuivenX(x) | definieer een transformatie, waarbij alleen de waarde van de X-as wordt gebruikt. | test |
| verschuivenY(y) | definieer een transformatie, waarbij alleen de waarde van de Y-as wordt gebruikt. | test |
| verschuivenZ(z) | definieer een 3D-transformatie, waarbij alleen de waarde van de Z-as wordt gebruikt. | |
| schalen(x,y) | definieer een 2D-schalingstransformatie. | test |
| schalen3d(x,y,z) | definieer een 3D-schalingstransformatie. | |
| schalenX(x) | definieer een schalingstransformatie door de waarde van de X-as in te stellen. | test |
| schalenY(y) | definieer een schalingstransformatie door de waarde van de Y-as in te stellen. | test |
| schalenZ(z) | definieer een 3D-schalingstransformatie door de waarde van de Z-as in te stellen. | |
| rotatie(hoek) | definieer een 2D-rotatie, waarbij de hoek in de parameters wordt opgegeven. | test |
| rotatie3d(x,y,z,hoek) | definieer een 3D-rotatie. | |
| rotatieX(hoek) | definieer een 3D-rotatie langs de X-as. | test |
| rotatieY(hoek) | definieer een 3D-rotatie langs de Y-as. | test |
| rotatieZ(hoek) | definieer een 3D-rotatie langs de Z-as. | test |
| helling(x-hoek,y-hoek) | definieer een 2D-hellingstransformatie langs de X- en Y-as. | test |
| hellingX(hoek) | definieer een 2D-hellingstransformatie langs de X-as. | test |
| hellingY(hoek) | definieer een 2D-hellingstransformatie langs de Y-as. | test |
| perspectief(n) | definieer een perspectiefweergave voor 3D-transformatie-elementen. | test |
technische details
| standaardwaarde: | geen |
|---|---|
| erfelijkheid: | nee |
| versie: | CSS3 |
| JavaScript syntaxis: | object.style.transform="draai(7graden)" |
meer voorbeelden
- de afbeelding die op tafel wordt gegooid
- Dit voorbeeld toont hoe je een 'Polaroid'-afbeelding kunt maken en de afbeelding kunt draaien.
browserondersteuning
De getallen in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.
Getallen met -webkit-、-moz- of -ms- voorvoegsel vertegenwoordigen de eerste versie die de prefix gebruikt.
| eigenschappen | 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- |
- vorige pagina top
- volgende pagina transform-origin
