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
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 css3

8 Reacties

  1. De schrijver/schrijfster had natuurlijk de W3C drafts voor css3 kunnen bekijken, dan was meteen duidelijk geweest dat css3 de transform tag gaat ondersteunen met daarin subopties voor draaiïngen, schuintrekken, herpositioneringen en andere 2D/3D opties.
    Wat dat betreft is dit artikel een erg makkelijke manier van traffic genereren door css3 en rotate erin te zetten, maar zonder goede specificatie te komen.

    Ook is technisch gezien het voorbeeld met de tabel een heel slechte. Het roteren van een element is niet te vergelijken met een schuingetrokken tabelcel. Dit zou dan ook met een gewone tabel en css3 niet mogelijk zijn zonder elementen toe te voegen voor de headercellen. Als je een cel roteert veranderen namelijk ook de ankerpunten van de lijnen, dus die zouden niet meer aansluiten aan de tabel of de tabel overlappen.

  2. Dit slaat echt nergens op! Het klopt niet. De spec zegt niet dat het #selector {rotation:90deg;} is maar #selector {transform:rotate(90deg);} en het werkt alleen nog met prefixes zoals -webkit, -o, -moz.

    BS artikel. 🙂

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *