-
Perspective
Toujours à partir du premier code proposé, on ajoute des attributs: ici ,perspective.
Survolez chaque image: elles sont positionnées par 2 mais le code est en indépendant.Elles sont dimensionnées en 700x525px.
Ce code est un peu plus complexe car il faut, pour chaque image, déterminer le sens de rotation x ou y et le point d'origine de la transformation.
<p><img id="j1" src="http://ekladata.com/S3o8GO7QrcBHLIK8liBtiVoT10c.jpg" alt="" /></p>
<p><img id="j2" src="http://ekladata.com/oNx2YqshkFuOsIs-4l2SsXa8rBE.jpg" alt="" /></p>
<p><img id="j3" src="http://ekladata.com/W1mCJsYgD96rbyuoB0CC8pPhSxQ.jpg" alt="" /></p>
<p><img id="j4" src="http://ekladata.com/9s50JT5uGasnFsRYpG2dceiq-gA.jpg" alt="" /></p>
<style><!--
#j1 {transition:all 2s linear; transform:translate(0px,0px) scale3d(1,1,0.5) perspective(200px) rotatex(40deg);transform-origin:bottom center; border:6px ridge white; box-shadow:4px 4px 8px black;}
#j2 {transition:all 2s linear; transform:translate(0px,0px) scale3d(1,1,0.5) perspective(200px) rotatex(-40deg);transform-origin:top center; border:6px ridge white; box-shadow:4px 4px 8px black;}
#j3 {transition:all 2s linear; transform:translate(0px,0px) scale3d(1,1,0.5) perspective(200px) rotatey(-40deg);transform-origin:center right ; border:6px ridge white; box-shadow:4px 4px 8px black;}
#j4 {transition:all 2s linear; transform:translate(0px,0px) scale3d(1,1,0.5) perspective(200px) rotatey(40deg);transform-origin:center left; border:6px ridge white; box-shadow:4px 4px 8px black;}
#j1:hover,#j2:hover{transform:translate(0px,0px) scale3d(1,1,1) perspective(2000px) rotatex(0deg); z-index:5;}
#j3:hover, #j4:hover{transform:translate(0px,0px) scale3d(1,1,1) perspective(2000px) rotatex(0deg); z-index:5;}
--></style>