Code de l article "translation 3d", du 23.06.15

Le nombre d images multiplie les lignres très répétitives.

<div style="width: 800px; height: 600px; border: 4px solid grey; background: url('http://www.clipart-fr.com/data/texture/beige/beige_040.jpg'); background-size: auto; margin: 0 auto 10px auto;">
<div id="un">&nbsp;</div>
<div id="deux">&nbsp;</div>
<div id="trois">&nbsp;</div>
<div id="quatre">&nbsp;</div>
<div id="cinq">&nbsp;</div>
<div id="six">&nbsp;</div>
<div id="sept">&nbsp;</div>
<div id="huit">&nbsp;</div>
<div id="neuf">&nbsp;</div>
<div id="dix">&nbsp;</div>
<div id="onze">&nbsp;</div>
<div id="douze">&nbsp;</div>
<div id="comm">Survolez les vignettes.</div>
</div>
<style><!--
#un {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(20px,15px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4391f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#un:hover {transform:translate3d(0px,0px,50px) perspective(70px); width:800px; height:600px; z-index:5;}
#deux {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(20px,165px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4395f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#deux:hover {transform:translate3d(0px,0px,50px) perspective(70px); width:800px; height:600px; z-index:5;}
#trois {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(20px,315px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4396f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#trois:hover {transform:translate3d(0px,0px,30px) perspective(70px); width:800px; height:600px; z-index:5;}
#quatre {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(20px,465px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4398f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#quatre:hover {transform:translate3d(0px,0px,30px) perspective(70px); width:800px; height:600px; z-index:5;}
#cinq {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(220px,15px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4400f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#cinq:hover {transform:translate3d(0px,0px,30px) perspective(70px); width:800px; height:600px; z-index:5;}
#six {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(420px,15px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4401f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#six:hover {transform:translate3d(0px,0px,30px) perspective(70px); width:800px; height:600px; z-index:5;}
#sept {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(620px,15px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4417f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#sept:hover {transform:translate3d(0px,0px,20px) perspective(70px); width:800px; height:600px; z-index:5;}
#huit {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(620px,165px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4419f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#huit:hover {transform:translate3d(0px,0px,20px) perspective(70px); width:800px; height:600px; z-index:5;}
#neuf {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(620px,315px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4422f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#neuf:hover {transform:translate3d(0px,0px,20px) perspective(70px); width:800px; height:600px; z-index:5;}
#dix {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(620px,465px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4423f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#dix:hover {transform:translate3d(0px,0px,20px) perspective(70px); width:800px; height:600px; z-index:5;}
#onze {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(220px,465px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4402f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#onze:hover {transform:translate3d(0px,0px,20px) perspective(70px); width:800px; height:600px; z-index:5;}
#douze {position:absolute; transition: all 1s linear; transform: perspective(400px) translate(420px,465px); width: 160px; height: 120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a28/DSCN4426f.JPG'); background-size:cover; border:2px solid white; box-shadow:2px 2px 3px black;}
#douze:hover {transform:translate3d(0px,0px,20px) perspective(70px); width:800px; height:600px; z-index:5;}
 #comm{ position:absolute; transform:translate(220px,200px); text-align:center; font-size:25pt; color:lime; text-shadow:1px 1px black;}
--></style>