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