KOMPOOS.NL

tekst roteren

home » css » text-effects » roteer-tekst.html

sitemap


Het is een kleine moeite om, met alleen maar css, tekst een willekeurig aantal graden te laten roteren. Geef een header, div of p-tag (alle mogelijke containers) de class "rotate_text" en alles wat in de div of tag staat zal het gewenste aantal graden geroteerd worden.

Dit rotate-voorbeeld roteert een p-tag (met tekst) 2 graden naar rechts. Om roterende tekst op jouw website te gebruiken, moet je de onderstaande css code in de head-sectie van een pagina plaatsen. Als je een andere graad wilt gebruiken bij de rotatie heb ik een online tool die voor jou de code voor het aantal graden rotatie maakt. In dit voorbeeld is expres een ongunstige "hoek" gekozen. Dit om te laten zien dat de letters niet "loep-zuiver" op de pagina geplaatst worden. Vergeet niet dat alleen maar een paar regels css-code er voor zorgen dat de letters "kantelen". Een betere manier is om letters te draaien met behulp van php.

de css roteer code


<style type="text/css">
#rotate_text{
	font:18px Helvetica,Geneva,Arial,sans-serif;
	margin:20px 0 0 10px;
	display:block;
	width:40%;
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99939083, M12=-0.03489950, M21=0.03489950, M22=0.99939083,sizingMethod='auto expand');
	-moz-transform: matrix(0.99939083, 0.03489950, -0.03489950, 0.99939083, 0, 0);
	-webkit-transform: matrix(0.99939083, 0.03489950, -0.03489950, 0.99939083, 0, 0);
	-o-transform: matrix(0.99939083, 0.03489950, -0.03489950, 0.99939083, 0, 0)}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.