CSS3: Transformaties

Geschreven door: op dinsdag 3 november 2015

Leestijd:

CSS3-transformations-header

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:

css3-skew

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:

css3-skew

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>

css3-skew

Rotate

Hiermee roteert u een element:

.cube {

    background-color: #ff0000;

    height: 200px;

    transform: rotate(10deg);

    width: 200px;

}

css3-skew

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;

}

css3-skew2

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;

}

css3-skew2

Crossbrowser

Veel browsers verwachten nog een een browser-specifieke prefix, zoals bijvoorbeeld –webkit of –ms. Zie Browser compatibility.

Zie verder

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/transform
  2. 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. Hier ook benieuwd naar en wat er nog meer mogelijk is? Neem contact op met Sigma Solutions via het formulier of mail naar info@sigmasolutions.nl.

 


Andere blogartikelen

  • Til uw bedrijf naar een hoger plan met klantinzicht

    Geschreven door: op vrijdag 23 februari 2018

    80% van de CEO’s vindt de eigen organisatie klantgericht, slechts 8% van de klanten is het daarmee eens (Steven van Belleghem). In deze tijd van digitalisering is de klant kritischer dan ooit. Info ...

    Bekijk het artikel »
  • Css grid

    Geschreven door: op dinsdag 20 februari 2018

    Css grid is een vernieuwende manier voor het indelen van content op website pagina’s. Met behulp van css wordt de uiterlijk van een website bepaald. Doormiddel van een grid is het mogelijk om gemakkel ...

    Bekijk het artikel »
  • CSS vendor prefixes

    Geschreven door: op dinsdag 20 februari 2018

    Bij CSS is het voor een aantal stijl regels mogelijk om aan te geven in welke browser deze gebruikt moet worden. Hiervoor wordt het type browser toegevoegd voor de stijl regel. Dit wordt een prefix (o ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
Google adwords
TelefoonE-mail

whitepaper-customer-selfservice-1.png

Bedien uw klanten optimaal met customer selfservice

Download de whitepaper