CSS Transform-generator voor luie mensen.
Stel de schaal in, roteer, vertaal en scheef en bekijk de live preview om de gewenste weergave te krijgen.
Vermijd het instellen van extreme waarden voor de eigenschap scheeftrekken, omdat het voorbeeld het instellingenpaneel kan beslaan. In dit geval moet u de pagina vernieuwen.
Schalen, roteren, vertalen en scheeftrekken
Schaal werkt zoals u zou in- en uitzoomen op het beoogde element. De standaardschaalwaarde is 1, wat werkt als een vermenigvuldiger van de oorspronkelijke grootte. Dit betekent dat 0,5 halveert en 2 de sectie verdubbelt.
Draai het element met de klok mee met de tweede eigenschap die is ingesteld in graden. Draaien met 180° zet het object ondersteboven terwijl 360° teruggaat naar zijn oorspronkelijke rechtopstaande positie. Stel een positieve of negatieve waarde of zelfs decimalen in.
Vertalen verschuift het element met pixels die gerelateerd zijn aan de oorspronkelijke positie. De X-waarde horizontaal terwijl Y verticaal wanneer er een rotatieattribuut is, is nul.
Scheef de objecten op hun horizontale (X) of verticale (Y) as.
CSS-transformatie uitgelegd
Met de eigenschap transform CSS kunt u een element roteren, schalen, scheeftrekken en vertalen. Het wijzigt de coördinatenruimte van het visuele CSS-opmaakmodel.
Definitie en gebruik
De eigenschap transform past een 2D- of 3D-transformatie toe op een element. Met deze eigenschap kunt u elementen roteren, schalen, verplaatsen, scheeftrekken, enz.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
Syntaxis
transform: none|transform-functions|initial|inherit;
