Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer la page Suivre ce blog Administration + Créer mon blog
MENU
https://pourquoipas732.eklablog.com
montages par codes HTML/CSS
Menu
Perspective 1

Perspective 1

Amusement sur une seule image, pour le principe mais on devrait pour ajouter d'autres images pour faire un montage.

Survolez la partie encadrée.

 

 


<div style="width: 1005px; height: 563px; margin: 0px auto;">
<p id="s1" class="cc">&nbsp;</p>
<p id="s2" class="cc">&nbsp;</p>
</div>

<style><!--
.cc{background:url('https://ekladata.com/6lg2l5lc3nnsnhJ-E9sB4_IgZGc@1000x563.jpg');}
#s1{float:left; width:200px; height:563px;border:2px solid white; background-position:0px 0px;}
#s2{float:left; width:800px; height:563px; background-position:100% 0%; transform:scale3d(1,1,0.1) perspective(200px) rotatey(60deg); transform-origin:left center; transition:all 2s ease-out;}
#s1:hover{border:none;}
#s1:hover ~ #s2{transform:scale3d(1,1,1) perspective(5000px) rotatey(0deg);}
--></style>