CSS Transitions en Transforms overgangen en transformaties voor beginners

Logo cursus traing wordpress

CSS Transitions en Transforms overgangen en transformaties voor beginners

CSS Transitions and Transforms voor beginners

In dit bericht maak je kennis met CSS Transitions en Transforms voor beginners. Wanneer u deze eigenschappen samen gebruikt, kunt u eenvoudige animaties maken en waardevolle interactie en visuele feedback voor uw gebruikers toevoegen.

Houd er rekening mee dat u elke vorm van beweging aan uw project toevoegt om het eenvoudig, subtiel en consistent te houden. De beweging die u creëert moet betekenis overbrengen, altijd versterkend zijn en niet afleiden van de interactie voor uw gebruikers.

Dus wat zijn transformaties en transities? Op hun meest basale niveau verplaatsen of veranderen transformaties het uiterlijk van een element, terwijl overgangen ervoor zorgen dat het element soepel en geleidelijk van de ene toestand naar de andere verandert.

CSS Transitions introductie

Laten we beginnen met CSS-overgangen. Overgangen zijn het vet in het wiel van CSS-transformaties. Zonder een transitie zou een element dat wordt getransformeerd abrupt van de ene toestand naar de andere veranderen. Door een transitie toe te passen, kunt u de verandering beheersen, waardoor deze soepel en geleidelijk verloopt.

Beweeg hieronder:

See the Pen With and Without Transition by Rachel Cope (@rachelcope) on CodePen.

In dit bericht gebruik ik overgangen in combinatie met transformaties. Overgangen kunnen echter ook elders worden gebruikt waar elementen van de ene stijl naar de andere veranderen (bijvoorbeeld wanneer een knop van verandert tijdens het zweven).

Er zijn twee eigenschappen vereist om de transitie van kracht te laten worden:

  • transition-property
  • transition-duration

De transition-property specificeert de CSS-eigenschap waarop de transitie zal worden toegepast. U kunt een overgang toepassen op een individuele eigenschap (bijvoorbeeld of transformatie) of op alle eigenschappen in de regelset (dat wil zeggen, allemaal).

De eigenschap transition-duration specificeert de tijdspanne van de transitie. U kunt opgeven in seconden of milliseconden.

Voorbeelden van transition

Voorbeelden van transition:

See the Pen Translation Delay by Rachel Cope (@rachelcope) on CodePen.

CSS-transform: introductie

Nu we hebben besproken hoe we vloeiende en geleidelijke overgangen kunnen maken, gaan we kijken naar CSS-transformaties: hoe we een element van de ene staat naar de andere kunnen laten veranderen. Met de eigenschap CSS-transformatie kunt u elementen roteren, verplaatsen, scheeftrekken en schalen. (Dit bericht gaat alleen over 2D-transformaties, maar houd ons in de gaten voor toekomstige blogposts over 3D-transformaties.)

Transformaties worden geactiveerd wanneer een element van status verandert, zoals bij muisbeweging of muisklik. De voorbeelden in dit bericht demonstreren transformaties bij muisbeweging.

Voor de eenvoud gebruik ik in mijn voorbeelden alleen de versies zonder voorvoegsel. Het is echter mogelijk dat u voorvoegsels wilt toevoegen om ervoor te zorgen dat het in moderne browsers werkt.

Voorbeeld Transform

See the Pen CSS Scale Transition by Graham Clark (@Cheesetoast) on CodePen.

schaal / scale

Met de schaalwaarde kunt u de grootte van een element vergroten of verkleinen.

De waarde 2 zou de grootte bijvoorbeeld transformeren naar 2 keer de oorspronkelijke grootte. De waarde 0,5 zou de grootte transformeren naar de helft van de oorspronkelijke grootte.

See the Pen Transform: Scale by Rachel Cope (@rachelcope) on CodePen.

U kunt een element schalen door parameters in te stellen voor de breedte (X-as) of hoogte (Y-as). Transformeer bijvoorbeeld: scaleX(2).

Of gebruik de afkorting scale() om beide assen tegelijkertijd te schalen: transform: scale(2);.

Of definieer ze onafhankelijk van elkaar: transform: scale(2, 3);

Voorbeeld van CSS-syntaxis voor schaal

Vergeet niet een overgang toe te voegen! Zonder overgang toe te passen, zou het element abrupt van grootte veranderen. Voeg de overgang toe aan de bovenliggende selector (niet aan de hover-selector). Om de overgang soepel te laten verlopen bij zowel hover-over als hover-off.

div { transition: transform 1s; } div:hover { transform: scale(2); }

draaien / rotate

Met de rotatiewaarde roteert het element een bepaald aantal graden met de klok mee of tegen de klok in. Een positieve waarde, zoals 90 graden, roteert het element met de klok mee, terwijl een negatieve waarde, zoals -90 graden, het element tegen de klok in draait.

See the Pen Transform Rotate Example by Rachel Cope (@rachelcope) on CodePen.

translate

De vertaalwaarde verplaatst een element naar links/rechts en omhoog/omlaag. De beweging is gebaseerd op de parameters die zijn opgegeven voor de X (horizontale) Y (verticale) assen.

Een positieve X-waarde verplaatst het element naar rechts, terwijl een negatieve X het element naar links verplaatst. Een positieve Y-waarde verplaatst het element naar beneden en een negatieve Y-waarde naar boven.

In dit voorbeeld verplaatst het element 20 pixels naar rechts en 20 pixels naar beneden.

See the Pen Transform: Translate by Rachel Cope (@rachelcope) on CodePen.

Overzicht functies CSS Transform

/* Functies door Arthur Wentzel */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

Overgangen combineren

U kunt meerdere transformaties combineren. Bijvoorbeeld:

/* Combinaties Arthur Wentzel */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

Wil je meer details over CSS Transitions en Transforms overgangen en transformaties voor beginnersof info?

Wil je meer informatie? Veel web-designers met interesse in CSS Transitions en Transforms overgangen en transformaties voor beginners bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress site beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website of webshop sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over CSS Transitions en Transforms overgangen en transformaties voor beginners?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, CSS Transitions en Transforms overgangen en transformaties voor beginners en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven