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

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

Rotation point in een tabel met CSS

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

8 reacties

  1. Waldio schreef:

    rotation: 60deg;

    Dit werkt niet bij mij in FF. Met -moz- ervoor ook niet.

    Moet het niet dit zijn?
    -moz-transform: rotate(60deg);

  2. Waldio schreef:

    rotation: 60deg

    Dit werkt niet bij mij in FF. Met -moz- ervoor ook niet.

    Moet het niet dit zijn?
    -moz-transform: rotate(60deg)

  3. Jord schreef:

    Stoer 🙂

  4. Waldio schreef:

    Niet werkt niet bij mij?

  5. Jord schreef:

    misschien een beetje laat maar: -webkit-?

  6. YO schreef:

    Er staat dat dit een functie gaat worden van css 3 daarom werkt het no niet…

  7. Luuk Lamers schreef:

    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.

  8. Rick schreef:

    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. 🙂

Geef een reactie

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