Abîme5

6 images en 1200x675px, 16/9.

Il semble que le positionnement par transform-origin permette de faire des animations autres que centrées; de plus, donner des dimensions dans la class permet d'utiliser scale(1) ensuite, sur chaque image.

Les recherches que j'ai commencées sur cet attribut arrivent donc à leur terme, pour le moment du moins.

Clic pour changer d'image

Survol pour animation

 

 

 

 

 

 

---

<div style="width:1200px; height:675px; margin:50px auto; text-align:left;">

<input id="bt1" class="bt" type="text"><input id="bt2" class="bt" type="text"><input id="bt3" class="bt" type="text"><input id="bt4" class="bt" type="text"><input id="bt5" class="bt" type="text">

<p id="ind1">Clic pour changer d'image</p>

<p id="ind2">Survol pour animation</p>

<p id="anim">&nbsp;</p>

<p id="mg1" class="mga">&nbsp;</p>

<p id="mg2" class="mga">&nbsp;</p>

<p id="mg3" class="mga">&nbsp;</p>

<p id="mg4" class="mga">&nbsp;</p>

<p id="mg5" class="mga">&nbsp;</p>

</div>

<style><!--

.bt{position:absolute; width:35px; height:35px; border-radius:50%; border:none; background:red; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black;}

#bt1{transform:translate(10px,10px);}

#bt2{transform:translate(55px,10px);}

#bt3{transform:translate(100px,10px);}

#bt4{transform:translate(145px,10px);}

#bt5{transform:translate(190px,10px);}

#ind1{position:absolute; width:200px; font-size:20px; transform:translate(10px,60px);}

#ind2{position:absolute; width:300px; font-size:20px; transform:translate(900px,10px);}

#anim{position:absolute; z-index:10; width:1200px; height:675px; border-radius:50%;}

.mga{position:absolute; width:1200px; height:675px; border-radius:60%; box-shadow:inset -4px -4px 8px black, inset 4px 4px 8px 8px white; background:url('http://ekladata.com/jP-eDXY2VoXk_eATAYqDABzoPJk.jpg'); background-size:1200px 675px; transform-origin:bottom center; transition:all 1s;}

#mg1{transform:scale(1);}

#mg2{transform:scale(0.8);}

#mg3{transform:scale(0.6);}

#mg4{transform:scale(0.4);}

#mg5{transform:scale(0.2);}

.bt:focus{background:green;}

#bt1:focus ~ .mga{background:url('http://ekladata.com/xNMbVnPO5MJCh1N876jJv7talpw.jpg');background-size:1200px 675px;}

#bt2:focus ~ .mga{background:url('http://ekladata.com/cNKSQwMnKhAwG_-qLB-NIpejd4c.jpg');background-size:1200px 675px;}

#bt3:focus ~ .mga{background:url('http://ekladata.com/bz_4jzuZePupHcjaFEeQ9zIbjS8.jpg');background-size:1200px 675px;}

#bt4:focus ~ .mga{background:url('http://ekladata.com/X4xsmwWpXZb4Cq9blZQNi8CPv1k.jpg');background-size:1200px 675px;}

#bt5:focus ~ .mga{background:url('http://ekladata.com/9nl1jXJoYKcVsnx9GG6Y4-Q8MMg.jpg');background-size:1200px 675px;}

#anim:hover ~ #mg1,#anim:hover ~ #mg2,#anim:hover ~ #mg3,#anim:hover ~ #mg4,#anim:hover ~ #mg5{transform:scale(1);}

--></style>