De CSS-functie roteren () vervormt een element met een bepaald aantal graden. U kunt een element met de klok mee draaien met een positief aantal graden. Of je kunt een item tegen de klok in draaien met een negatief getal.
Vandaag gaan we leren hoe je elementen kunt roteren met CSS. Waarom een element roteren? Roterende elementen maken uw webpagina interactiever. Correct gebruikt, zal een roterend element bijdragen aan de esthetiek van uw site.
Raadpleeg tijdens het lezen van dit artikel begeleidende repository , zodat u de concepten in actie kunt zien. Weten hoe je een element roteert, is een geweldige aanvulling op je CSS-toolbox.
CSS roteren ()
Met de functie CSS roteren () kun je een element op een 2D-as roteren. De functie roteren () heeft één argument nodig: de hoek waaronder u uw webelement wilt draaien. Je kunt een element met de klok mee of tegen de klok in draaien.
Laten we eens kijken naar de syntaxis van de functie roteren () :
De "hoek" waarde vertegenwoordigt het aantal graden dat het element moet draaien. U kunt een rotatie met de klok mee specificeren met een positief aantal graden (bijvoorbeeld 45). Of u kunt in de tegenovergestelde richting roteren met een negatieve graadwaarde (bijv. -39).
De functie roteren () kan op elk HTML-element worden toegepast. U kunt bijvoorbeeld een alinea met tekst roteren. Of je kunt een afbeelding draaien.
Er verschijnt een HTML-rotatie zodra je de pagina rendert, dus er is geen zichtbare rotatie. Om de rotatie in actie te zien, moet je een CSS-overgang gebruiken. Overgangen veranderen de status van een element wanneer een actie wordt ondernomen, bijvoorbeeld wanneer een cursor over een element zweeft.
" CSS-transformatiefunctie , zoals de naam al doet vermoeden, transformeert elementen. Een van de functies die we erop kunnen toepassen is roteren (). De eigenschap transform kan veel andere functies aannemen en er is veel dat we met de transformatie kunnen doen. Roteren is er slechts één van.