CSS3: Transformaties
Inleiding
De transform-functionaliteit van CSS3 geeft u de mogelijkheid om elementen in een document qua afmetingen en vorm aan te passen. In combinatie met animaties, schaduwen, transities en andere visuele mogelijkheden van CSS3, maakt u zo een goed ogende website, waarmee u nieuwe en bestaande klanten sneller aan u bindt.
De volgende transformaties zijn beschikbaar:
- Matrix. Hiermee kunt u een matrix-berekening uitvoeren op de afmetingen en positie van een element.
- Translate. De positie van een element aanpassen.
- Scale. Een element schalen.
- Rotate. Het element roteren.
- Skew. Met skew kunt u een element scheef tonen op de website.
Toepassen
U past een transformatie op de volgende manier toe:
.e {
transform: translate(100px, 100%);
}
<p class="e">
Een stukje tekst...
</p>
<p>...eronder staat meer tekst.</p>
Dit zorgt ervoor dat, zonder de eigenschap position aan te passen, u het uiterlijk (wat betreft afmetingen en posities) van het element kunt aanpassen:
Verschillende transformatie
Elke transformatie heeft een aantal verschillende functies:
Matrix
- matrix
- matrix3d
Translate
- translate
- translateX
- translateY
- translate3D
- translateZ
Scale
- scale
- scaleX
- scaleY
- scale3d
- scaleZ
Rotate
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
Skew
- skewX
- skewY
De functies met Z en 3d hebben betrekking op een virtuele derde dimensie, waarin de eigenschappen van een element ook aangepast kunnen worden.
Voorbeelden transformaties
Translate
Bij translate geeft u absolute of relatieve waarden op. De positie van uw element wordt dan aangepast.
.e {
transform: translate(100px, 100%);
}
<p class="e">
Een stukje tekst...
</p>
<p>...eronder staat meer tekst.</p>
Dit zorgt ervoor dat, zonder de eigenschap position aan te passen, u het uiterlijk (wat betreft afmetingen en posities) van het element kunt aanpassen:
Scale
Bij scale geeft u aan hoe vaak een hoogte of breedte vermenigvuldigd moet worden:
.cube {
background-color: #ff0000;
height: 200px;
transform: scale(4, 0.25);
width: 200px;
}
<div class="cube">
</div>
Rotate
Hiermee roteert u een element:
.cube {
background-color: #ff0000;
height: 200px;
transform: rotate(10deg);
width: 200px;
}
Dit kunt u ook om een bepaalde as doen, zoals bijvoorbeeld:
.cube {
background: rgba(0, 0, 0, 0) linear-gradient(#ff0000, #0000ff) repeat scroll 0 0;
height: 200px;
transform: rotateY(58deg) rotateX(44deg);
width: 200px;
}
Skew
Bovenstaand voorbeeld lijkt op skew en kunt u dus ook zo toepassen:
.cube {
background: rgba(0, 0, 0, 0) linear-gradient(#ff0000, #0000ff) repeat scroll 0 0;
height: 200px;
transform: skewX(30deg);
width: 200px;
}
Crossbrowser
Veel browsers verwachten nog een een browser-specifieke prefix, zoals bijvoorbeeld –webkit of –ms. Zie Browser compatibility.
Zie verder
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform
- CSS3: Nieuwe mogelijkheden om uw site er mooier uit te laten zien
In het Accessify WCMS kunnen de gecertificeerde ontwikkelaars bij Sigma Solutions eenvoudig bovenstaande functionaliteit toepassen op websites en webshops. Benieuwd wat de mogelijkheden van B2B Webdesign zijn voor uw bedrijf? Neem contact op met Sigma Solutions via het formulier of mail naar info@sigmasolutions.nl.
