KOMPOOS.NL

transform rotate CSS

home » css » text-effects » transform-rotate.html

sitemap

voorbeeld transform rotate

1. rotate

   tekst op een cross browser manier

2. css

   code voor een nuttig effect

3. effecten

   zonder een regel javascript

4. de code

   werkt in alle browsers

5. strict

   browsers en IE

6. beide

   doen het op een andere manier

uitleg transform rotate procedure

In IE explorer is het effect vrij saai. Alleen de tekst wordt geroteerd (bij een hover), en er is wat opacity toegevoegd. In strict-browsers ziet het er al een stuk beter uit. In chrome en Safari (en ook Opera) zelfs fantastisch. Om dit effect aan jouw website toe te voegen kan je de onderstaande html-code als voorbeeld gebruiken, mits je de stylesheet in de head-sectie van jouw pagina geplaats hebt.

stylesheet van de transform rotate procedure

<style type="text/css">
	.transform_rotate{
		font-size:24px}
	.transform_rotate,p{
		font-weight:normal}
	ol,li{
		list-style:none}
	ol{
		overflow:hidden;
		padding:5em}
	ol li a{
		font-size:12px;font-weight:bold;
		text-decoration:none;
		color:#000;
		background:#ffd;
		display:block;
		height:9em;
		width:9em;
		padding:1em;
		-moz-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
		-webkit-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
		box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
		-o-transition:-o-transform .15s linear;
		-webkit-transition:-webkit-transform .15s linear;
		-moz-transition:-moz-transform .15s linear;
		-webkit-transform: rotate(-6deg);
		-o-transform: rotate(-6deg);
		-moz-transform:rotate(-6deg)}
	ol li{
		margin:-1.3em;
		float:left}
	ol li p{
		font-family:"Comic Sans MS",Arial,helvetica,sans-serif;
		margin:1em 0 0 0;
		font-size:14px;font-style:italic}
		ol li:nth-child(even) a{
		-o-transform:rotate(3deg);
		-webkit-transform:rotate(3deg);
		-moz-transform:rotate(3deg);
		position:relative;
		top:5px;
		background:#dfd}
	ol li:nth-child(3n) a{
		-o-transform:rotate(7deg);
		-webkit-transform:rotate(7deg);
		-moz-transform:rotate(7deg);
		position:relative;
		top:-5px;
		background:#fdd}
	ol li a:hover,ol li a:focus{
		box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
		-moz-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
		-webkit-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
		-webkit-transform:scale(1.25);
		-moz-transform:rotate(-1deg) scale(1.25);
		-o-transform: scale(1.25);
		background:#fdf;color:#000;
		position:relative;
		z-index:5}
</style>
<!--[if IE]>
	<style type="text/css">
		ol li p{
			margin:0.5em 2em 0 0}
		ol li a{
			font-size:12px;font-weight:bold;
			text-decoration:none;
			color:#000;
			background:#aaaaaa;
			display:block;
			height:9em;
			width:10em;
			padding:1em}
		ol li a:hover,ol li a:focus{
			position:absolute;
			position:relative;
			height:11em;
			width:12em;
			filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99939083, M12=-0.03489950, M21=0.03489950, M22=0.99939083,sizingMethod='auto expand')progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=60,finishOpacity=100);
			z-index:6; 
			margin-bottom:-2em;margin-right:-2em;
			background:#fb0;color:#000;font-weight:bold}
	</style>
<![endif]-->

html code die op deze pagina gebruikt is

<ol>
	<li><a href="http://kompoos.nl/css/text-effects/transform-rotate.html"><span class="transform_rotate">rotate</span><p>tekst op een cross browser manier</p></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/transform-rotate.html"><span class="transform_rotate">css</span><p>code voor een nuttig effect</p></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/transform-rotate.html"><span class="transform_rotate">effecten</span><p>zonder een regel javascript</p></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/transform-rotate.html"><span class="transform_rotate">de code</span><p>werkt in alle browsers</p></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/transform-rotate.html"><span class="transform_rotate">strict</span><p>browsers en IE</p></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/transform-rotate.html"><span class="transform_rotate">beide</span><p>doen het op een andere manier</p></a></li>
</ol>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.