03a.04.2024

 A partir du code précédent, nous pouvons facilement modifier le "point de fuite" de notre image.

Au lieu de considérer que le point de modification est le centre de l'image (par défaut) nous luis indiquons d'en prendre un autre par:

transform-origin: top left; (ici) mais vous avez d'autres positionnements possibles par cet attribut, du genre transform-origin:100px 80px. A vous de choisir...

Il faut, comme dans le code précédent, placer un bouton invisible en premier plan (pf0) pour animer toutes les images d'un seul survol.

<div style="width: 1000px; height: 563px; margin: 50px auto;">
<p id="pf0">&nbsp;</p>
<p id="pf1" class="pf">&nbsp;</p>
<p id="pf2" class="pf">&nbsp;</p>
<p id="pf3" class="pf">&nbsp;</p>
<p id="pf4" class="pf">&nbsp;</p>
<p id="pf5" class="pf">&nbsp;</p>
<p id="pf6" class="pf">&nbsp;</p>
<p id="pf7" class="pf">&nbsp;</p>
<p id="pf8" class="pf">&nbsp;</p>
<p id="pf9" class="pf">&nbsp;</p>
<p id="pf10" class="pf">&nbsp;</p>
</div>
<style><!--
#pf0{position:absolute; z-index:10; width:1000px; height:563px;}
.pf{position:absolute; box-sizing:border-box; width:1000px; height:563px; border:4px solid white; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px black; background:url('http://ekladata.com/dL_sTQtpGpOflauS4ANibkn7GZE.jpg'); background-size:cover; transform-origin:top left; transition:all 2s;}
#pf1{transform:scale(1);}
#pf2{transform:scale(0.9);}
#pf3{transform:scale(0.8);}
#pf4{transform:scale(0.7);}
#pf5{transform:scale(0.6);}
#pf6{transform:scale(0.5);}
#pf7{transform:scale(0.4);}
#pf8{transform:scale(0.3);}
#pf9{transform:scale(0.2);}
#pf10{transform:scale(0.15);}
#pf0:hover~#pf2,#pf0:hover~#pf3,#pf0:hover~#pf4,#pf0:hover~#pf5,#pf0:hover~#pf6,#pf0:hover~#pf7,#pf0:hover~#pf8,#pf0:hover~#pf9,#pf0:hover~#pf10{transform:scale(1);}
--></style>