web2 logo

Transformaties

Met transformaties (transforms) kan de vorm van elementen op de webpagina worden aangepast.

Grootte aanpassen met scale

Een plaatje anderhalf keer vergroten als je er met de muis overheen gaat kan als dit plaatje een link is met scale:
a:hover img {
transform: scale(1.5);
}
Transform laat de andere elementen van de webpagina met rust, alleen het element met transform wordt in dit geval vergroot, waardoor het gedeeltelijk over de andere elementen zal vallen.
Standaard wordt de transformatie uitgevoerd vanuit het midden van het element, maar dat kan ook aangepast worden met transform-origin:
a:hover img {
transform-origin: bottom left;
transform: scale(1.5);
}
Transform-origin kan verschillende waarden krijgen, onder andere: top, bottom, center of een percentage.
Je kunt een plaatje niet alleen van grootte veranderen, maar je kunt er bijvoorbeeld ook een extra schaduw aan toevoegen als er met de muis overheen gegaan wordt:
a:hover img {
transform: scale(1.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
In dit geval zorgen we voor een zwarte schaduw met 50% doorzichtigheid, de schaduw begint 4 pixels vanaf de bovenkant en 4 pixels vanaf de linkerkant en heeft een dikte van 10 pixels.
De transformatie hoeft niet plots te zijn, maar kan ook geleidelijk met een transform:
a img {
width: 160px;
transition: transform 0.3s ease-in-out;
}
a:hover img {
transform: scale(1.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

Draaien met rotate

Een andere manier om een element te transformeren is draaien, dit kan via rotate:
a:hover img {
transform: scale(1.5) rotate(-10deg);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
Een negatieve waarde tussen -1deg en -360deg zal een element tegen de klok in draaien en een positieve waarde tussen de 1deg en 360deg zal het element met de klok mee draaien.

Kantelen met skew

Nog een manier om een element te transformeren is het kantelen van een element met skew:
a:hover img {
transform: scale(1.5) skew(-15deg, 30deg);
}
In dit geval wordt er 15 graden negatief gekanteld op de x-coordinaat en 30 graden positief gekanteld op de y-coordinaat.
Als je bij skew slechts 1 waarde opgeeft, dan geldt deze waarde zowel voor de x- als voor de y-coordinaat.
Dit vergt wel wat experimenteren, want kantelen maakt een afbeelding er meestal niet mooier op.

Verplaatsen met translate

Nog een andere manier om elementen te transformeren is het verplaatsen van een element via translate:
a:hover img {
transform: scale(1.5) translate(25px, 50px);
}
In dit geval wordt de afbeelding verplaatst met 25 pixels naar rechts en 50 pixels naar beneden.
Om een element naar boven of naar links te verplaatsen kun je negatieve waarden gebruiken.
Ook hier geldt weer dat de andere elementen onaangeroerd blijven, het verschoven elementen schuift dus over andere elementen heen.

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ css ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.