CSS3 – 2D Transform – Rotate

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

In deze video behandel ik de css-eigenschap 'transform'.

En de verschillende transformeer opdrachten die je hiervoor kunt opgeven.

Het betreft hier zogeheten -dimensionele transformaties waarmee je html-elementen kunt roteren,

schalen, verplaatsen en schuintrekken. Voor roteren geef je één waarde op.

En wel in graden en in het Engels gebruik je hiervoor dan de afkorting van degrees (deg).

Voor schalen,

verplaatsen en schuintrekken geef je twee waarden op.

De eerste waarde betreft de horizontale as en de tweede waarde de verticale as.

Als ik dat wil toelichten in dit voorbeeld. Is er een transform opdracht 'scale' geschreven.

Staat voor het huidige formaat, . is dan hetzelfde als %.

En dan is het eerste getal staat voor de horizontale as, dus dan wordt het element een half keer groter.

Het tweede getal staat voor de verticale as en deze staat op . en dat is de helft kleiner.

Dus dat zou resulteren in dit eindresultaat.

Je kunt een css eigenschap 'transform' voorzien van meerder transformeer eigenschappen.

Dan kun je de aparte transformeringen met hun waarden, tussen haakjes, gewoon achter elkaar aan plaatsen.

Achter de eigenschap 'transform'. Ondanks dat deze in één stijlregel staan.

Mag je natuurlijk in je css-stijlblad best wel nieuwe regels aanmaken voor de aparte transformeringen en hun waarden.

Sommige transformaties hebben twee waarden die je moet invoeren.

Zoals bijvoorbeeld schalen, schuintrekken en verplaatsen.

Als je hier maar één waarde van invoert dan laat je het aan default instellingen over wat er met de tweede waarde gebeurt.

Vaak wordt dan dezelfde waarde aangehouden als die ene die hebt ingevuld. Ik doe het voor in een document.

In de bijbehorende index.html staat in een omsluitende 'div' genoemd 'wrapper'.

Een aantal artikelen en deze staan allemaal in de article-tag.

Het zijn twee soorten artikelen. Alle oneven artikelen worden aangegeven met de class="een".

En alle even artikelen worden aangegeven met de class="twee".

Deze twee class-selectors vind je ook terug in je css-stijlblad.

Bekijk eest even een voorbeeld van deze pagina in de browser.

Zoals je ziet staan al deze artikelen onder elkaar vormgegeven op de pagina.

Binnen een artikel staat een kopje, een afbeelding en een stuk tekst.

Elk artikel heeft een witte achtergrond gekregen.

Een border-radius, zo ook de afbeeldingen, van pixels voor de hoekafronding.

En de afbeeldingen binnen de artikelen hebben een kleine slagschaduw.

Ik begin met het roteren van alle artikelen.

Daarvoor kan ik dan vervolgens het article-element gebruiken. En deze vind ik terug als zijnde

De article-selector in mijn css-stijlblad. ik schrijf hiervoor 'transform'.

End an vervolgens de eigenschap 'rotate'.

En tussen haakjes moet je dan de rotatiewaarden invoeren.

Als ik alle artikelen graden wil roteren, dan gebruik ik de afkorting degree (deg).

En alle artikelen worden met de klok mee, graden geroteerd.

Als ik dat tegen de klok in had willen doen dan kan ik daarvoor een negatieve waarde gebruiken, namelijk - degree.

De transformatie wordt ook op de kinderen van het artikel toegepast.

Dus de kopjes, de teksten en de afbeeldingen roteren met de artikelen mee.