logo
  Flipfoto
  Een prachtig effect met foto's. Je hoeft niets te downloaden alles draait op CSS. En natuurlijk doet hij het niet in IE
Ga met je muis over het plaatje heen.


Je kan ook een tekst gebruiken en je kan hem ook anders laten draaien. Kortom, er zijn heel veel mogelijkheden.
Een prachtig gezicht vind je niet? Jammer dat ze zo snel groeien

 
IN DE CSS
div.flip{
position:relative;
width: 300px;
height: 250px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s;
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
div.flip div.rotate > div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #fff;
border:#000 solid 1px;
}
div.rotate.x *:nth-child(2){
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.flip:hover > div.rotate.x{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

 
TUSSEN DE BODY TAGS
<div class="flip" style="width: 250px; height: 200px; display: inline-block;">
<div class="rotate y">
<img src="jou foto 1">
<img src="jou foto 2">
</div>
</div> <br>

<div class="flip" style="display: inline-block; width: 250px; height: 200px;">
<div class="rotate x">
<img src="jou foto 1">
<div>
Hier jou tekst met eventueel plaatje
</div>
</div>
</div>

 
eind