CSS 3: rotation en rotation-point

Een nieuw onderdeel van CSS 3 zou het draaien van een box element kunnen worden. Nu moet dat nog gebeuren door afbeeldingen te roteren, straks zou dat moeten kunnen met het CSS element rotation, waarna je vervolgens een hoek aangeeft.
Dat ziet er als volgt uit:

Roteren van een box met CSS 3

Je moet wel het boxmodel begrijpen wil je dit goed kunnen toepassen. Hierover kun je meer lezen in het artikel ‘Het Boxmodel’.

Wanneer je dus een box hebt kun je in CSS3 de volgende css code toevoegen aan je stijlblad:

div {rotation: 60deg;}

Hiermee roteer je de betreffende div met 60°. Hierbij moet je bedenken dat wanneer je dit op 90° zet je de box een kwart draait. Met 180° staat de box ondersteboven en met 360° staat de box weer gewoon. Het roteren gaat in dit geval met de klok mee.

Het tweede deel van het roteren is het punt waarvandaan de rotatie begint. Standaard is dit het midden, dus de box draait vanuit het midden om de as. Dit zet je in css als volgt neer:

div {rotation: 60deg; rotation-point: 50% 50%;}

Wanneer je de rotatie echter vanuit een ander punt wilt laten beginnen dan kan dat ook. Een voorbeeld is een tabel, waarbij de bovenste (thead attributen) schuin staan. Dan zou je kunnen draaien vanuit de onderkant en links (bottom left). De code wordt dan:

thead th {rotation: 60deg; rotation-point: bottom left;}

Het resultaat zou dan als volgt worden:

Rotation point in een tabel met CSS