• Perspective

    Un exemple simple de code perspective.
    Le cadre à fond gris n'est là que pour montrer la taille du montage; la plante est de la famille des lamiers. (merci Céphalentera)

    Survolez les images latérales

     

     


    <div style="width: 80vw; height: 92vh; border: 0.2vh solid black; background: rgba(0,0,0,0.5); margin: 0 auto;">
    <p id="ph0">Survolez les images lat&eacute;rales</p>
    <p id="ph1">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    </div>
    <style><!--
    #ph0{position:absolute; z-index:1; width:50vw; height:20vh;transform:translate(15vw,10vh); text-align:center; font-size:2.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #ph1{position:absolute; z-index:2; width:80vw; height:92vh;transform:translate(0vw,0vh) perspective(500px) rotatey(60deg); background:url('http://ekladata.com/_VZqDn6hFO49nSLg1YI3uTO03aA.jpg'); background-size:100%; transition:all 1s linear; transform-origin:center left; transition:all 1s linear;}
    #ph2{position:absolute; z-index:2; width:80vw; height:92vh;transform:translate(0vw,0vh) perspective(500px) rotatey(-60deg); background:url('http://ekladata.com/QlCytb0hq5d8zlwO7BfuWb6QQjQ.jpg'); background-size:100%; transition:all 1s linear; transform-origin:center right;transition:all 1s linear;}
    #ph1:hover, #ph2:hover{z-index:5; transform:translate(0vw,0vh) perspective(5000px) rotatey(0deg);
    --></style>