CSS - Elementen schalen


Met behulp van CSS kun je sinds CSS 3 elementen eenvoudig schalen. Dit is bijvoorbeeld in te zetten in het geval van een mouse-over, leuk voor bijvoorbeeld een hoofdmenu. Alle moderne browsers zoals Chrome en Firefox hebben ondersteuning voor het roteren van elementen, alleen voor browser Safari moet er nog een prefix ingesteld worden.

Het schalen van element gaat met behulp van de onderstaande code, wijzig de code naar wens. Hierin is een mouse-over ingesteld voor de div met de classnaam rounded. Overigens alles onder de 1.0 zorgt voor een verkleining. Voorbeelden zie je hieronder.

div.rounded:hover {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
}


Ga met de muis over het element om de vergroting te zien.

Vergroting
Verkleining