CSS3 – 2D Transform – Origin

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.

En hierdoor heb ik de oneven artikelen behoorlijk groter gemaakt. Maar ook om het volgende even duidelijk te maken.

De artikelen nemen alleen maar hun originele ruimte in.

En niet de ruimte die ze via deze transform-opdracht hebben gekregen.

Dat betekent dat de elementen elkaar kunnen gaan overlappen.

Dat kan ik nog duidelijker maken door bijvoorbeeld de achtergrondkleur even gedeeltelijk transparant te maken.

Dus dan vervang ik het getal , van het alphakanaal, in bijvoorbeeld ..

En dan zie je inderdaad duidelijk hoe deze artikelen nu over elkaar heen worden geplaatst.

Je ziet zelfs dat deze buiten de originele 'wrapper' terecht komen.

Normaal omsluit een 'wrapper' alle elementen. Dat doet hij ook nog steeds.

Maar de transform-opdracht wordt er later overheen gerekend.

En daardoor kunnen ze dus zelfs buiten de 'wrapper komen te staan.

Ook gedeeltelijk buiten de viewport, zoals je ziet aan de bovenkant.

Waar zelfs een deel van de tekst is weggevallen.

En dat komt vanwege het volgende.

Normaliter wordt de linker bovenhoek van html-elementen altijd gebruikt als het originepunt.

Dit noemen we ook wel het nulpunt.

Maar zodra je gebruik maakt van één van de transform-eigenschappen.

Dan wordt voor het betreffende element standaard gebruik gemaakt van een gecentreerd nulpunt.

En de default waarde is %, % van het html-element.

Alleen de ruimte die het originele element inneemt, blijft voorbehouden voor het element.

En in dit geval heb ik dus het element . keer vergroot.

En dat wordt vanuit het nulpunt gedaan, dus vanuit het midden standaard. En daarom valt eengedeelte hiervan weg.

Maar je kunt met de eigenschap 'transform-origin, zelf weer het nulpunt bepalen voor het element.

Voor de eigenschap 'transform-origin' voer je twee waarden in.

De eerste waarde geldt voor de x-as, de horizontale verplaatsing.

En de tweede waarde voor de y-as, de verticale verplaatsing.

Dus als je weer gebruik wilt maken van de linker bovenhoek als nulpunt.

Dan kun je dit aangeven met pixel, pixel.

Maar dit had ook gekund door de waarde 'left, top' te gebruiken.

Horizontaal kun je het nulpunt bepalen met left,center of right.

En verticaal met top, center of bottom.

Default wordt de transform-origin op % gezet, dus je kunt de linker bovenhoek ook benaderen, door %, % te gebruiken.

Dus als ik dat wil toepassen in ons document, dan breng ik eerst de schaling weer terug naar %, dus ..

Dan zie je dat de overlapping nog steeds plaatsvindt. Maar het gaat me nu even om het origin-punt.

Als ik vervolgens voor "een" vraag om een transform-origin.

En ik bepaal dat deze komt op 'left top'.

Dan wordt vanaf nu dus de linker bovenhoek weer aan gehouden om de transformatie toe te passen.

En dit geldt dan nu voor alle oneven artikelen.

En dit geldt dan nu voor alle even artikelen.

En voor de oneven artikelen bepaal ik een ander transform-origin punt.

En deze zet ik op 'right top', dus aan de rechter bovenhoek.

Vanwege de vergroting blijft natuurlijk de overlap bestaan.

Als ik deze overlapping niet wil, dan zou ik bijvoorbeeld gebruik kunnen maken van een margin-bottom.

En dan moet je even zoeken naar de juiste afstand. En ik begin even met pixels om te kijken wat dit oplevert.

Nou, deze zorgt er in ieder geval voor dat het volgende artikel er exact onder begint.

En ook als je aan de onderkant van het tweede artikel geen overlapping wilt.

Dan zou ik bijvoorbeeld, de artikelen met de class="twee" ook een margin-bottom mee kunnen geven.

Deze heeft niet dezelfde vergroting als de eerste artikelen.

Dus ik denk dat ik met pixels ook al een eind kom.

En inderdaad nu heb je ervoor gezorgd dat de overlappingen niet meer plaats vinden.