6XC

CSS Transformatie Generator

Combineer rotate, scale, translate en skew visueel en kopieer de resulterende transform-CSS.

969 weergaven

De eigenschap transform

transform verplaatst, roteert, schaalt en scheeft een element zonder de documentflow te beïnvloeden, en is GPU-versneld — daarom zijn transform (samen met opacity) de eigenschappen bij uitstek voor vloeiende animaties. Functies worden van rechts naar links toegepast, dus hun volgorde is belangrijk: rotate(45deg) translateX(50px) is niet hetzelfde als de omgekeerde volgorde.

Veelgestelde vragen

Waarom is de volgorde van functies belangrijk?

Elke functie transformeert het coördinatensysteem voor de volgende. Eerst translate, dan rotate: verplaatst eerst en draait dan ter plekke. Eerst rotate, dan translate: draait eerst de as, waardoor de beweging diagonaal verloopt.

Heeft transform invloed op omliggende elementen?

Nee — het element behoudt zijn oorspronkelijke ruimte in de layout. Dat maakt transformaties goedkoop om te animeren, maar betekent dat u op overlappingen moet letten.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren