Animation 10 abyme CSS

A partir des codes déjà expérimentés, voici une version en rond... Survolez le montage.

<div id="g0" class="gen">
<p id="g">&nbsp;</p>
<p id="gg" class="gen">&nbsp;</p>
<p id="g1" class="gen">&nbsp;</p>
<p id="g2" class="gen">&nbsp;</p>
<p id="g3" class="gen">&nbsp;</p>
<p id="g4" class="gen">&nbsp;</p>
<p id="g5" class="gen">&nbsp;</p>
<p id="g6" class="gen">&nbsp;</p>
<p id="g7" class="gen">&nbsp;</p>
<p id="g8" class="gen">&nbsp;</p>
<p id="g9" class="gen">&nbsp;</p>
<p id="g10" class="gen">&nbsp;</p>
</div>
<style><!--
.gen{background: url('http://ekladata.com/_93fEOKgIRh1aQdAakH5X0gTR4g/1247rd.jpg'); background-size: cover; width:600px; height:600px;}
#g0{position:relative; width:600px; height:600px; margin:10px auto; background: url('http://ekladata.com/eswebBo_j8eZORYlOPJZ7DjNWuA/laybkgnd.jpg');}
#g{position:absolute; z-index:10; transform:translate(-6px,-6px) ; width:600px; height:600px; border:6px ridge grey;}
#gg{position:absolute; z-index:1; transition:all 3s linear; width:600px; height:600px;border-radius:50%; transform:translate(0px,0px) rotatey(0deg); border:3px solid white;}
#g1{position:absolute; z-index:1; transition:all 3s linear; width:550px; height:550px; border-radius:50%; transform:translate(0px,0px) rotatey(0deg); border:3px solid white;}
#g2{position:absolute; z-index:2; transition:all 3s linear; width:500px; height:500px;border-radius:50%; transform:translate(0px,0px) rotatey(0deg);border:3px solid white;}
#g3{position:absolute; z-index:3; transition:all 3s linear; width:450px; height:450px;border-radius:50%; transform:translate(0px,0px)rotatey(0deg) ;border:3px solid white;}
#g4{position:absolute; z-index:4; transition:all 3s linear; width:400px; height:400px;border-radius:50%; transform:translate(0px,0px) rotatey(0deg);border:2px solid white;}
#g5{position:absolute; z-index:5; transition:all 3s linear; width:350px; height:350px;border-radius:50%; transform:translate(0px,0px)rotatey(0deg) ;border:2px solid white;}
#g6{position:absolute; z-index:6; transition:all 3s linear; width:300px; height:300px;border-radius:50%; transform:translate(0px,0px) rotatey(0deg);border:1px solid white;}
#g7{position:absolute; z-index:7; transition:all 3s linear; width:250px; height:250px;border-radius:50%; transform:translate(0px,0px)rotatey(0deg) ;border:1px solid white;}
#g8{position:absolute; z-index:8; transition:all 3s linear; width:200px; height:200px;border-radius:50%; transform:translate(0px,0px) rotatey(0deg);border:1px solid white;}
#g9{position:absolute; z-index:9; transition:all 3s linear; width:150px; height:150px;border-radius:50%; transform:translate(0px,0px) rotatey(0deg);border:1px solid white;}
#g10{position:absolute; z-index:9; transition:all 3s linear; width:100px; height:100px;border-radius:50%; transform:translate(0px,0px)rotatey(0deg) ;border:1px solid white;}

#g:hover ~ #gg{width:600px; height:600px; transform:translate(0px,0px) rotatey(180deg);}
#g:hover ~ #g1{width:550px; height:550px; transform:translate(50px,50px) rotatey(180deg);}
#g:hover ~ #g2{width:500px; height:500px; transform:translate(100px,100px) rotatey(180deg); }
#g:hover ~ #g3{width:450px; height:450px; transform:translate(150px,150px) rotatey(180deg);}
#g:hover ~ #g4{width:400px; height:400px; transform:translate(200px,200px) rotatey(180deg);}
#g:hover ~ #g5{width:350px; height:350px; transform:translate(250px,250px) rotatey(180deg);}
#g:hover ~ #g6{width:300px; height:300px; transform:translate(300px,300px) rotatey(180deg);}
#g:hover ~ #g7{width:250px; height:250px; transform:translate(350px,350px) rotatey(180deg);}
#g:hover ~ #g8{width:200px; height:200px; transform:translate(400px,400px) rotatey(180deg);}
#g:hover ~ #g9{width:150px; height:150px; transform:translate(450px,450px) rotatey(180deg);}
#g:hover ~ #g10{width:100px; height:100px; transform:translate(500px,500px) rotatey(180deg);}
--></style>