foto html - css     . Cliparts - Flip foto

Omschrijving   Voorbeeld

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 bodytags

<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>

end
terug
home