Retournement

6 images superposées dans un montage en 1200x675px.

Chacune reçoit une rotation horizontale différente et se redresse au survol.

<div style="border: 6px ridge grey; height: 675px; margin: 50px 0px 0px -25px; width: 1200px;">

<img class="ret" id="ret1" src="https://i.goopics.net/yh680s.jpg" />

<img class="ret" id="ret2" src="https://i.goopics.net/l547xm.jpg" />

<img class="ret" id="ret3" src="https://i.goopics.net/m1hcjk.jpg" />

<img class="ret" id="ret4" src="https://i.goopics.net/48n1os.jpg" />

<img class="ret" id="ret5" src="https://i.goopics.net/5op7kv.jpg" />

<img class="ret" id="ret6" src="https://i.goopics.net/1pa5t2.jpg" />

<p id="fd">SURVOL</p>

</div>

<style><!--

.ret{position:absolute; width:1200px; height:675px; border:8px ridge white; transform-origin:top center; transition:all 1s;}

#ret1{box-sizing:border-box;transform:rotatey(0deg);}

#ret2{box-sizing:border-box; transform:rotatey(30deg);}

#ret3{box-sizing:border-box;transform:rotatey(45deg);}

#ret4{box-sizing:border-box; transform:rotatey(58deg);}

#ret5{box-sizing:border-box;transform:rotatey(70deg);}

#ret6{box-sizing:border-box; transform:rotatey(82deg);}

#fd{position:absolute; z-index:5; width:60px; height:675px; text-align:center; font-size:50px; color:white; line-height:60px; transform:translate(10px,0px);}  

#ret1:hover,#ret2:hover,#ret3:hover,#ret4:hover,#ret5:hover,#ret6:hover{z-index:10; transform:rotatey(0deg);}  

--></style>

 

SURVOL