CSS3 – 2D Transform – Matrix

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 behandelen we de eigenschap 'transform' met de waarde 'matrix'.

Met de waarde matrix kun je een aantal D transformaties in één stijlregel schrijven.

Hierbij is het belangrijk dat je de juiste volgorde van transformaties en de benodigde en de benodigde waarde opgeeft.

Je schrijft ze komma gescheiden achter elkaar.

Je kunt met matrix de D-transformaties scale, translate en skew beschrijven.

Maar je kunt er niet mee roteren.

De zes waarden staan hier weergegeven als a,b,c,d,e en f.

A staat voor horizontaal schalen, dus verbreden of versmallen.

B staat voor verticaal schuintrekken.

C staat voor horizontaal schuintrekken.

D staat voor verticaal schalen, dus verhogen of verlagen.

En de waarde E staat voor het verplaatsen horizontaal.

En de laatste waarde voor de verticale verplaatsing.

Voor het invoeren van de waarden en het bepalen van het getal.

Moet je rekening houden met het volgende.

Bij het schalen staat het getal voor het huidige formaat, . is dan dus de helft.

En als je de waarde invoert dan is deze dus een keer breder en hoger dan het origineel.

Voor het verplaatsen, dat zijn hier dus de laatste twee getallen e en f.

Typ je een getal en dat wordt dan vervolgens de verplaatsing in pixels.

Het is moeilijker om grip te krijgen op het schuintrekken.

Dat is dus de waarde b en c. Als je de waarde intyp, dan is dat al een behoorlijke schuintrek actie.

Voor subtiel schuintrekken, gebruik je een getal vanaf .. Duidelijker wordt dit in een voorbeeld.

Op de bijbehorende index.html staan in een omsluitende 'wrapper',

een aantal artikelen onder elkaar geplaatst.

De artikelen zijn om en om voorzien van de class="een" en -"twee".

In de artikelen met de class naam "een" staan afbeeldingen en ook "twee".

Beide hebben in de css-stijlblad een eigen opmaak gekregen.

De afbeeldingen van artikel "een" staan rechtslijnend en "twee" linkslijnend.

En ook de slagschaduw is naar links of rechts geplaatst.

Ik begin met het toepassen van de 'transform : matrix', voor de artikelen met de class="een".

Dus de eigenschap 'transform' met de waarde 'matrix'. Haakje openen en haakje sluiten.

En tussen de haakjes plaats je dan vervolgens de zes waarden. Te beginnen met de horizontale schaling.

Ik wil dat deze niet schaalt, dus die mag op blijven staan en ik plaats een komma.

Vervolgens plaats je het getal voor de verticale schuintrekking.

Als ik kies voor en ik plaats vervolgens ook de overige opdrachten.

Voor horizontaal schuintrekken zet ik deze op , voor verticaal schalen zet ik deze op .

Horizontale verplaatsing hou ik op en ook het verticale verplaatsen houd ik op .

En dan bekijk ik eerst het eindresultaat.

Het enige wat ik nu daadwerkelijk heb ingevoerd, is het verticaal schuintrekken met het getal .

En je ziet dus dat dit al een behoorlijke schuintrek actie is.

Maar het geeft je wel het idee wat dit getal inhoudt.

Dus als ik het veel minder heftig zou willen toepassen, zou ik bijvoorbeeld kunnen typen ..

En als ik het nog subtieler wil dan kan ik in principe ook naar ..

Het is natuurlijk wel belangrijk dat je ook rekening houdt,

met het schuintrekken van de inhoud van het artikel.

Want ook de teksten worden schuingezet en die wil je antuurlijk nog wel goed leesbaar houden.

Dus je zult niet snel gebruik maken van een groot getal.

Als ik naast het verticaal schuintrekken ook het horizontaal schuintrekken zou willen bepalen. Dat is het derde getal.

Dan kan ik bijvoorbeeld hier ook een . eerst voor proberen. Om te kijken wat dit oplevert.

Ook bij het schalen moet je er rekening bij houden dat teksten nog steeds goed leesbaar blijven.

Dus het disproportioneel schalen is eigenlijk wel af te raden.

Het eerste getal staat voor horizontaal schalen en het vierde getal voor verticaal schalen.

Als je deze op laat staan, dan wordt er dus niet geschaald. En dit is het originele formaat.

Om de elementen te verplaatsen gebruik je de laatste twee getallen.

Het ene laatste getal is voor de horizontale verplaatsing en deze wil ik bijvoorbeeld pixels verplaatsen.

Dan voldoet het om daar te typen. Want het wordt altijd in pixels verplaatst.

Zoals ik nu deze transform-opdracht heb gegeven voor de eerste artikelen, kan ik het ook doen voor alle even artikelen.

Transform : matrix.

En dan de haakjes openen en sluiten en tussen de haakjes te beginnen met horizontaal schalen.

Als ik die op laat staan dan behoudt hij zijn huidige formaat.

Ten tweede, het verticaal schuintrekken. Deze wil ik voor de tweede artikelen spiegelend hebben van de eerste artikelen.

Dus daarvoor voer ik een negatieve waarde in -., dan houd ik zelfde schuintrekking aan als voor de eerste.

Vervolgens ga ik naar horizontaal schuintrekken. Deze zet ik ook spiegelend -.

Dan het verticaal schalen. Als ik deze niet wil toepassen plaats ik daar een voor.

En het verplaatsen horizontaal zet ik nu op - en verticaal houd ik op .

Dat levert dan vervolgens dit eindresultaat op.

Nu is het voornamelijk een kwestie van zelf experimenteren.

We hebben natuurlijk in dit voorbeeld twee soorten afbeeldingen.

Namelijk deze binnen de artikelen met de class-naam "een" en met de class-naam "twee".

Ik kan nog wel even iets voor doen.

Ik kan bijvoorbeeld de afbeeldingen weer gaan rechtzetten en verplaatsen met de opdracht 'transform : matrix'.

En dan wil ik bijvoorbeeld dat de afbeeldingen die nu in de eerste artikelen staan, die staan rechtslijnend.

Dat deze niet vergroten of verkleinen, dat ze vervolgens ook niet schuin getrokken worden.

In ieder geval niet verticaal. Dat ze horizontaal wel schuin getrokken worden, maar een klein beetje. Dus dat is -..

Ook verticaal wil ik niet schalen. Ik wil wel dat de afbeelding verplaatst wordt, bijvoorbeeld pixels.

En dan alleen maar horizontaal. En verticaal houd ik op .

Hiermee zet ik de afbeeldingen weer recht.

Dan krijgen we een spannend D-effect op deze manier. Want deze 'staat' nu als het ware binnen het artikel.

En ditzelfde kan ik dan ook doen voor de afbeelding in de artikelen met de classnaam="twee".

Maar dan naar de andere kant, dus ook hiervoor geldt 'transform : matrix'.

Haakje openen, haakje sluiten, tussen de haakjes de zes getallen.

Allereerst dus horizontaal schalen, die staat op . Dus die wordt niet geschaald.

Verticaal schuin trekken wil ik terugzetten op .

Het horizontaal schuin trekken zet ik op .

Het verticaal schalen houd ik op zijn eigen formaat en dat is .

En vervolgens moet hij wel verplaatst worden maar deze keer naar links, met -. En niet verticaal verplaatst worden.

In dit voorbeeld kun je ook duidelijk zien.

Dat de transform-opdracht, niet de oorspronkelijke fysieke ruimte van het element aantast.

En dat zie je dus heel goed aan de tekstomloop. Deze staat nog steeds schuin.

Ten teken dat eigenlijk de afbeelding daar binnen ook nog steeds een originele schuin getrokken positie inneemt.

Ook al heb ik hem nu met een eigen transform-opdracht weer recht gezet.

Ook nu geldt dat je door veel te experimentern achter de mogelijkheden van het transformeren kunt komen.

Als ik bijvoorbeeld de kaartjes weer als een soort uitklap harmonica, maar wel met een D-effect wil plaatsen.

Dan kan ik ook weer de verticale schuintrek actie op zetten.

En dan maak je het weer ongedaan. Dan wordt deze dus niet meer verticaal schuin getrokken. Nog wel horizontaal.

Waardoor de kaartjes als het ware als een soortement van uitklap harmonica onder elkaar verschijnen.