-
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érales</p>
<p id="ph1"> </p>
<p id="ph2"> </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>