Diapo perspective

En reprenant certains codes, déjà proposés, je retrouve celui-ci, en unités fixes (px).

<div id="fd" style="width: 800px; height: 600px; border: 4px ridge grey; box-shadow: 4px 4px 8px black; background: url('http://www.clipart-fr.com/data/texture/gris/gris_052.jpg');">
<div id="p0">Survolez chaque &eacute;l&eacute;ment, avec photos prises autour de ma maison.</div>
<div id="p1">&nbsp;</div>
<div id="p2">&nbsp;</div>
<div id="p3">&nbsp;</div>
<div id="p4">&nbsp;</div>
<div id="p5">&nbsp;</div>
<div id="p6">&nbsp;</div>
<div id="p7">&nbsp;</div>
<div id="p8">&nbsp;</div>
<div id="p9">&nbsp;</div>
</div>
<style><!--
#fd{ width:800px; height:600px; margin:10px auto 10px auto; border:6px ridge white; box-shadow:4px 4px 8px black; background-size:cover; background:url('http://www.clipart-fr.com/data/texture/gris/gris_052.jpg');}
#p0{position:absolute; width:750px; transform:translate(25px,5px); text-align:center; font-size:14pt; color:coral; text-shadow:1px 1px black;}
#p1{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4500.JPG'); background-size:cover; transform:translate(50px,150px) perspective(300px) rotatey(45deg);}
#p2{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4501.JPG'); background-size:cover; transform:translate(120px,150px) perspective(300px) rotatey(45deg);}
#p3{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4502.JPG'); background-size:cover; transform:translate(190px,150px) perspective(300px) rotatey(45deg);}
#p4{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4503.JPG'); background-size:cover; transform:translate(260px,150px) perspective(300px) rotatey(45deg);}
#p5{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4504.JPG'); background-size:cover; transform:translate(330px,150px) perspective(300px) rotatey(45deg);}
#p6{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4505.JPG'); background-size:cover; transform:translate(400px,150px) perspective(300px) rotatey(45deg);}
#p7{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4506.JPG'); background-size:cover; transform:translate(470px,150px) perspective(300px) rotatey(45deg);}
#p8{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4507.JPG'); background-size:cover; transform:translate(540px,150px) perspective(300px) rotatey(45deg);}
#p9{transition:all 1s linear; position:absolute; width:200px; height:350px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a30/DSCN4508.JPG'); background-size:cover; transform:translate(610px,150px) perspective(300px) rotatey(45deg);}
#p1:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p2:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p3:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p4:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p5:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p6:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p7:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p8:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
#p9:hover{z-index:5; width:800px; height:600px; border:0px solid white; transform:translate(0px,0px);}
--></style>