Flips multiples 3

Au choix: Changement de sens d'animation en ne changeant qu'une lettre au code précédent.

<div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.3vh solid white; background: linear-gradient(to bottom, rgba(100,100,0,0.7) 0%, rgba(0,0,0,0.3) 100%);">
<p id="bat0">&nbsp;</p>
<p id="bat1" class="bouta">A</p>
<p id="bat2" class="bouta">B</p>
<p id="bat3" class="bouta">C</p>
<p id="bat4" class="bouta">D</p>
<p id="bat5" class="bouta">E</p>
<p id="bat6" class="bouta">F</p>
<p id="bat7" class="bouta">G</p>
<p id="bat8" class="bouta">H</p>
<p id="fa1" class="flap">&nbsp;</p>
<p id="fa2" class="flap">&nbsp;</p>
<p id="fa3" class="flap">&nbsp;</p>
<p id="fa4" class="flap">&nbsp;</p>
<p id="fa5" class="flap">&nbsp;</p>
<p id="fa6" class="flap">&nbsp;</p>
<p id="fa7" class="flap">&nbsp;</p>
<p id="fa8" class="flap">&nbsp;</p>
<p id="fa9" class="flap">&nbsp;</p>
</div>
<style><!--
#bat0{position:absolute; z-index:5; width:2vw; height:33.75vw; transform:translate(58vw,0vw);text-align:center;background:rgba(0,0,0,0.3);}
.bouta{position:absolute; z-index:5; width:2vw;font-size:2vw; text-align:center; color:white; text-shadow:0.1vh 0.1vh black;}
#bat1{ transform:translate(58vw,2vw);}
#bat2{transform:translate(58vw,5vw);}
#bat3{transform:translate(58vw,8vw);}
#bat4{ transform:translate(58vw,11vw);}
#bat5{transform:translate(58vw,14vw);}
#bat6{transform:translate(58vw,17vw);}
#bat7{transform:translate(58vw,20vw);}
#bat8{transform:translate(58vw,23vw);}
.flap{position:absolute; z-index:1; transition:all 1s linear 0s; width:60vw; height:33.75vw; background-size:60vw 33.75vw; backface-visibility: hidden;}
#fa1{transform:translate(0vw,0vw) rotatex(0deg); background:url('https://ekladata.com/P32CaVnMfPDb1MZzy9s-ln_dFJI@1152x648.jpg');}
#fa2{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/eJf8jm438CYE0PYeS8J7Yj2WU30@1152x648.jpg');}
#fa3{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/Yr9owbt_wutdLwaYMs5murLupvs@1152x648.jpg');}
#fa4{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/nADf3TNID4WRXgDvxx5Oplu3lsQ@1152x648.jpg');}
#fa5{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/EOfbaj4-pJkk2TzYC4HNIBA42bY@1152x648.jpg');}
#fa6{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/98kvI6eHby6GJgsjnIZ2ONJMVnM@1152x648.jpg');}
#fa7{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/j-WZTdWr4VYVCrLjHnjcCyHAAlA@1152x648.jpg');}
#fa8{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/Lxiqx4eibH3o7Han2crthxS1fn4@1152x648.jpg');}
#fa9{transform:translate(0vw,0vw) rotatex(-180deg); background:url('https://ekladata.com/VYyHYdAL7CWp-GwzQ1gx7PVZFxc@1152x648.jpg');}

#bat1:hover ~ #fa1, #bat2:hover ~ #fa1, #bat3:hover ~ #fa1,#bat4:hover ~ #fa1, #bat5:hover ~ #fa1, #bat6:hover ~ #fa1, #bat7:hover ~ #fa1, #bat8:hover ~ #fa1, #bat9:hover ~ #fa1{transform:translate(0vw,0vw) rotatex(180deg);}
#bat1:hover ~ #fa2,#bat2:hover ~ #fa3,#bat3:hover ~ #fa4,#bat4:hover ~ #fa5,#bat5:hover ~ #fa6,#bat6:hover ~ #fa7,#bat7:hover ~ #fa8,#bat8:hover ~ #fa9{transform:translate(0vw,0vh) rotatex(0deg);}
--></style>