HTMLcssJAVA.com

text-transform:

text-transform is een eigenschap van CSS die het lettertype van een tekst wijzigt. Deze eigenschap kan worden gebruikt om de tekst te veranderen in hoofdletters, kleine letters of een kapitalisatie-stijl zoals in een titel;

Voorbeelden:

• text-transform: uppercase;
• text-transform: lowercase;
• text-transform: capitalize;

Toepassing:

<DIV style="text-transform: capitalize;"> Voorbeeldtekst </DIV>

transform:

transform is een CSS-eigenschap die wordt gebruikt om elementen op een pagina te transformeren of te veranderen. Deze eigenschap kan een element draaien, schalen, verplaatsen, spiegelen en in 3D-ruimte draaien;

Voorbeelden:

• transform: rotate(20deg);
• transform: scale(2);
• transform: translateX(50px);
• transform: skewX(20deg);

Toepassing:

<DIV style="transform: skewX(20deg);"> Voorbeeldtekst </DIV>

transform-origin:

De transform-origin property bepaalt de originele positie waaruit een transformatie wordt uitgevoerd. Het kan worden gebruikt om een element te draaien, te schalen, af te platten of te verdraaien en is afhankelijk van de positie van de elementen op de pagina.

Voorbeelden:

• transform-origin: top left;
• transform-origin: top center;
• transform-origin: top right;
• transform-origin: center left;
• transform-origin: center;
• transform-origin: center right;
• transform-origin: bottom left;
• transform-origin: bottom center;
• transform-origin: bottom right;

Toepassing:

<DIV style="transform-origin: bottom right;"> Voorbeeldtekst </DIV>

transform-style:

De transform-style property bepaalt hoe 3D-elementen worden weergegeven. Het kan worden ingesteld als "flat" of "preserve-3d", waarbij de laatste optie de 3D-elementen als een echte 3D-laag laat zien.

Voorbeelden:

• transform-style: flat;
• transform-style: preserve-3d;

Toepassing:

<DIV style="transform-style: preserve-3d;"> Voorbeeldtekst </DIV>

perspective:

De css property perspective definieert het perspectief dat van toepassing is op een element en alle elementen daaronder. Het perspectief definieert hoe ver een element lijkt te verwijderen van het scherm wanneer je erin kijkt. Als je een waarde instelt voor perspective, worden alle transformaties die je maakt vanaf dat punt gerelateerd aan die perspectief.

Voorbeelden:

• perspective: 10px;
• perspective: 500px;
• perspective: 1000px;

Toepassing:

<DIV style="perspective: 1000px;"> Voorbeeldtekst </DIV>