• Transitions rotation.

    Un montage exemple pour animer un élément au survol, en rotation horizontale, verticale et 3D... sans trop de risques car l'eau ne déborde pas !
    Survolez chacune des lettres.

    A

    B

    C

    D

    E

    F

     

    <div style="width: 800px; height: 500px; border: 6px ridge grey; background: url('http://ekladata.com/Sm1oA1ImUvX8ToJjnJtMyXWzQBs/00004.jpg'); background-size: cover; margin: 5px auto;">
    <p id="exa" class="lt">A</p>
    <p id="exb" class="lt">B</p>
    <p id="exc" class="lt">C</p>
    <p id="exd" class="lt">D</p>
    <p id="exe" class="lt">E</p>
    <p id="exf" class="lt">F</p>
    <p id="ex">&nbsp;</p>
    </div>

    <style><!--
    #ex{position:absolute; transition:all 1s linear; width:400px; height:225px; background:url('http://ekladata.com/OpzaRMb5OoqvEGj6nMTPebFVHaw.gif'); background-size:cover; transform:translate(200px,110px) rotate(0deg) perspective(5000px);}
    .lt{z-index:10; font-size:25pt; color:white; text-shadow:2px 2px black;}
    #exa{position:absolute;  transform:translate(20px,460px);}
    #exb{position:absolute;  transform:translate(80px,460px);}
    #exc{position:absolute;  transform:translate(140px,460px);}
    #exd{position:absolute;  transform:translate(200px,460px);}
    #exe{position:absolute;  transform:translate(260px,460px);}
    #exf{position:absolute;  transform:translate(320px,460px);}  
    #exa:hover ~ #ex{width:800px; height:450px; transform:translate(0px,0px) rotatey(180deg);}
    #exb:hover ~ #ex{width:800px; height:450px; transform:translate(0px,0px) rotate3d(0,1,0,180deg) perspective(400px);}
    #exc:hover ~ #ex{width:800px; height:450px; transform:translate(0px,0px) rotatex(180deg);}
    #exd:hover ~ #ex{width:800px; height:450px; transform:translate(0px,0px) rotate3d(1,0,0,180deg) perspective(400px);}
    #exe:hover ~ #ex{width:800px; height:450px; transform:translate(0px,0px) rotate(180deg);}
    #exf:hover ~ #ex{width:600px; height:340px; border-radius:50%; transform:translate(100px,50px) rotate3d(1,0,1,320deg) perspective(400px); box-shadow:inset 6px 6px 10px white, inset -6px -6px 10px black;}
    --></style>