• Flips multiples 3

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

     

    A

    B

    C

    D

    E

    F

    G

    H

     

     

     

     

     

     

     

     

     


    <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('http://ekladata.com/P32CaVnMfPDb1MZzy9s-ln_dFJI@1152x648.jpg');}
    #fa2{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://ekladata.com/eJf8jm438CYE0PYeS8J7Yj2WU30@1152x648.jpg');}
    #fa3{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://ekladata.com/Yr9owbt_wutdLwaYMs5murLupvs@1152x648.jpg');}
    #fa4{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://ekladata.com/nADf3TNID4WRXgDvxx5Oplu3lsQ@1152x648.jpg');}
    #fa5{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://ekladata.com/EOfbaj4-pJkk2TzYC4HNIBA42bY@1152x648.jpg');}
    #fa6{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://ekladata.com/98kvI6eHby6GJgsjnIZ2ONJMVnM@1152x648.jpg');}
    #fa7{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://ekladata.com/j-WZTdWr4VYVCrLjHnjcCyHAAlA@1152x648.jpg');}
    #fa8{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://ekladata.com/Lxiqx4eibH3o7Han2crthxS1fn4@1152x648.jpg');}
    #fa9{transform:translate(0vw,0vw) rotatex(-180deg); background:url('http://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>