• Montage 339

    Un rappel de l'utilisation de la rotation d'une image, selon sa position.

    Survol


    <div style="width: 900px; height: 506px; margin: 10px auto; border: 1px solid black; text-align: left; background: linear-gradient(to top,rgba(255,255,255,1) 0%, rgba(0,128,128,1) 100%);"><img id="ret1" class="ret" src="http://ekladata.com/aNDPZ6zpG9yrirJnd3iU_cbfYFQ@900x506.jpg" alt="" /> <img id="ret2" class="ret" src="http://ekladata.com/I0hximF7pABXUMDvtWXEb6a-2bI@900x506.jpg" alt="" /> <img id="ret3" class="ret" src="http://ekladata.com/75--W5hMDqu_mTzM_zEKTZ90B3E@900x506.jpg" alt="" /> <img id="ret4" class="ret" src="http://ekladata.com/0hD-Egp_Yynf68PmjhbqTTZQi7M@900x506.jpg" alt="" /> <img id="ret5" class="ret" src="http://ekladata.com/ytOtW8EH9ujgyboAarAGhgVpbYI@900x506.jpg" alt="" />
    <p id="ind">Survol</p>
    </div>
    <style><!--
    #ind{position:absolute; z-index:1; width:120px; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(390px,100px);}
    .ret{position:absolute; z-index:1; transition:all 1s linear;}
    #ret1{transform-origin:center left; transform:translate(0px,0px) perspective(150px) rotatey(60deg);}
    #ret2{transform-origin:center top; transform:translate(0px,0px) perspective(150px) rotatex(-60deg);}
    #ret3{transform-origin:center right; transform:translate(0px,0px) perspective(150px) rotatey(-60deg);}
    #ret4{transform-origin:center bottom; transform:translate(0px,0px) perspective(150px) rotatex(60deg);}
    #ret5{width:450px; height:253px; transform:translate(225px,126px) rotatex(70deg);}
    #ret1:hover,#ret2:hover,#ret3:hover,#ret4:hover,#ret5:hover{z-index:5; width:900px; height:506px; transform:translate(0px,0px) perspective(1500px) rotate(0deg);}
    --></style>


    La rotation peut être soit selon l'axe horizontal y, soit selon l'axe vertical x; l'effet est plus agréable en ajoutant de la perspective.

    La valeur de la rotation peut-être en positif ou en négatif à définir selon la position de l'image.

    Le point de référence: transform-origin; est, par défaut, le centre de l'image (image centrale); pour une image positionnée sur un côté, il faut définir le côté comme point de référence, en latéral comme en vertical.

    Rappel: la valeur de la perspective est importante avec une petite valeur (10px) et moindre plus la valeur est importante.

    Au survol, la rotation est réglée à (0deg) et la perspective en grande valeur (1500px).