KOMPOOS.NL

flip images

home » css » image-effects » image-flip.html

voorbeeld flip procedure

image-flip

uitleg image-flip procedure

Deze flip-procedure is cross browser. Alleen hele oude IE-browsers worden niet meer ondersteund. Het zou een beetje vreemd zijn als de pagina sterk vertraagd zou worden (wat het inladen betreft) voor een browser-versie die niemand eigenlijk meer gebruikt. Om deze horizontale/verticale flip op jouw website te plaatsen moet je de onderstaande css-code in de head-sectie van jouw pagina plaatsen, en de html-code in de body-sectie van jouw pagina plaatsen. Als je een afbeelding de class flip_horizontaal of flip_verticaal geeft, zal bij een hover van het plaatje het effect uitgevoerd worden.

css code


<style type="text/css" media="screen">
	.flip_horizontaal:hover{
		-webkit-transform:scaleX(-1);
		-moz-transform:scaleX(-1);
		-o-transform:scaleX(-1);
		transform:scaleX(-1);
		filter:fliph}
	.flip_verticaal:hover {
		-webkit-transform:scaleY(-1);
		-moz-transform:scaleY(-1);
		-o-transform:scaleY(-1);
		transform:scaleY(-1);
		filter:flipv}
</style>

html code


<p>
	<img class="flip_horizontaal" alt="image-flip" src="jouw_flip_plaatje.jpg" /> 
	<img class="flip_verticaal" alt="image-flip" src="jouw_flip_plaatje.jpg" />
</p>