Art.22a.8.21

Toujours pour faire suite à une page précédente... avec ajout de l'attribut perspective.

Survol bordures

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/YPKQci72Rfumtu4zeTvH9Rm9bH8@1000x562.jpg'); background-size: cover;">
<p id="sv">Survol bordures</p>
<img id="br1a" class="br" src="http://ekladata.com/a0oTWJskfT6amIZNE5t56piQx7k@1000x562.jpg" alt="" /> <img id="br2a" class="br" src="http://ekladata.com/kTH1vSHN9lHhsTUbcfljq5rtZLI@1000x562.jpg" alt="" /> <img id="br3a" class="br" src="http://ekladata.com/0w9bYT5zsqYXlgXcerLkjz1rocY@1000x562.jpg" alt="" /> <img id="br4a" class="br" src="http://ekladata.com/2ID1EvwHrzJLz38E4iadcnLMOTs@1000x562.jpg" alt="" /></div>

<style><!--
#sv{position:absolute; z-index:1; width:300px; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(50px,50px);}
.br{position:absolute; z-index:1; width:1000px; height:562px; border:4px solid white; transform:translate(0px,0px); transition:all 1s;}
#br1a{box-sizing:border-box; transform:perspective(500px) rotatey(85deg); transform-origin:center left;}
#br2a{box-sizing:border-box; transform:perspective(500px) rotatex(-85deg); transform-origin:center top;}
#br3a{box-sizing:border-box; transform:perspective(500px) rotatey(-85deg); transform-origin:center right;}
#br4a{box-sizing:border-box; transform:perspective(500px) rotatex(85deg); transform-origin:center bottom;}
#br1a:hover,#br2a:hover,#br3a:hover,#br4a:hover{z-index:5; transform:perspective(2000px) rotate(0deg);}
--></style>