• Rotation horizontale

    Suite à un article, qui reprend ce principe, je reviens ici pour rappeler qu'une rotation peut être en horizontal, en vertical ou les deux.

    On peut également déterminer la position de l'axe de rotation: survolez les images.

     

     

     

    <div style="width:80vw; height:45vw; margin:2vh auto;">
    <p id="rh1">&nbsp;</p>
    <p id="rh2">&nbsp;</p>
    <p id="rh3">&nbsp;</p>
    <p id="rh4">&nbsp;</p>
    </div>
    <style><!--
    #rh1{position:absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/zHUgTbTJDezralMIU5bq2B0RMQY.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(80deg); transform-origin:top left; transition:all 1s linear;}
    #rh2{position:absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/uSkF1LUlEFEnlN65H1EoCCxq_6U.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(80deg); transform-origin:center center; transition:all 1s linear;}
    #rh3{position:absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/p_SuCDzh1HVyXplCsMJyK0Vk9-Q.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(80deg); transform-origin:top right; transition:all 1s linear;}
    #rh4{position:absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/W8ZdRRULLt6zsx1oeRBZ0VR2CfM.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatex(80deg); transform-origin:center center; transition:all 1s linear;}
    #rh1:hover,#rh2:hover,#rh3:hover,#rh4:hover{z-index:10;transform:translate(0vw,0vw) rotatey(0deg) rotatex(0deg);}
    --></style>