Transformation

 

 

 

 

 

 

 

 

<div style="height: 600px;">
<p id="rd">&nbsp;</p>
<p id="ov1">&nbsp;</p>
<p id="ov2">&nbsp;</p>
<p id="ca">&nbsp;</p>
<p id="tr1">&nbsp;</p>
<p id="tr2">&nbsp;</p>
<p id="tr3">&nbsp;</p>
<p id="fd">&nbsp;</p>
</div>
<style><!--
#rd{position:absolute; transform:translate(1020px,20px); width:60px; height:60px; border:1px solid black; background-color:green; border-radius:50%;}
#ov1{position:absolute; transform:translate(1020px,100px); width:60px; height:40px; border:1px solid black; background-color:green; border-radius:50%;}
#ov2{position:absolute; transform:translate(1030px,160px); width:40px; height:60px; border:1px solid black; background-color:green; border-radius:50%;}
#ca{position:absolute; transform:translate(1020px,240px); width:60px; height:60px; border:1px solid black; background-color:green; border-radius:0%;}
#tr1{position:absolute; transform:translate(1020px,320px) scale3d(1,1.5,1) perspective(200px) rotateX(60deg); width:60px; height:60px; border:1px solid black; background-color:green;}
#tr2{position:absolute; transform:translate(1020px,400px) scale3d(1.5,1,1) perspective(200px) rotateY(60deg); width:60px; height:60px; border:1px solid black; background-color:green;}
#tr3{position:absolute; transform:translate(1020px,500px) scale3d(0.5,1,1) perspective(40px) rotateX(-60deg); width:60px; height:60px; border:1px solid black; background-color:green;}
#fd{transition:all 2s linear; position:absolute; transform:translate(0px,0px); width:1000px; height:563px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/22/font.JPG');}
#rd:hover ~ #fd{border-radius:50%; width:563px; background-position:center center; transform:translate(220px,0px);}
#ov1:hover ~ #fd{border-radius:50%; background-position:center center; transform:translate(0px,0px);}
#ov2:hover ~ #fd{border-radius:50%; width:300px; background-position:center center; transform:translate(350px,0px);}
#ca:hover ~ #fd{border-radius:0%; width:563px; background-position:center center; transform:translate(220px,0px);}
#tr1:hover ~ #fd{border-radius:0%; width:563px; background-position:center center; transform:translate(220px,-50px) scale3d(1,1.8,1) perspective(1000px) rotateX(60deg);}
#tr2:hover ~ #fd{border-radius:0%; width:563px; background-position:center center; transform:translate(220px,0px) scale3d(1,0.8,1) perspective(1000px) rotateY(60deg);}
#tr3:hover ~ #fd{border-radius:0%; background-position:center center; transform:translate(0px,100px) scale3d(0.5,1.4,1) perspective(500px) rotateX(-60deg);}
--></style>
L'image (id="fd") est placée en dernier dans le code et les boutons au dessus.