• Fenêtre

    Quelques explication sur le montage fenêtre, qui ouvre, dans un modèle simple, une image comme les deux vantaux d'une fenêtre, avec la perspective.

    On pourra ensuite ajouter un cadre plus important et plusieurs images: article ICI.

    Le résultat d'abord: survolez le montage:

     

     

     

    <div id="fr">
    <p id="bt">&nbsp;</p>
    <p id="fg">&nbsp;</p>
    <p id="fd">&nbsp;</p>
    </div>
    <style><!--
    #fr{width:800px; height:600px; border:1px solid #000000; margin:5px auto; background:url('http://ekladata.com/-1pecLE-QNf8tut9n8DnQ91oE2A.jpg');}
    #bt{position:absolute; z-index:5; transform:translate(0px,0px); width:800px; height:600px;}
    #fg{ position:absolute; z-index:1; transition:all 1s linear; transform:translate(0px,0px); transform-origin:center left; width:400px; height:600px; background:url('http://ekladata.com/o2LoZfOa3Ujg9zujdLH4t6gd2vY.jpg'); background-position:top left;}
    #fd{ position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,0px); transform-origin:center right; width:400px; height:600px; background:url('http://ekladata.com/o2LoZfOa3Ujg9zujdLH4t6gd2vY.jpg'); background-position:top right;}
    #bt:hover ~ #fg{transform:translate(0px,0px) perspective(1000px) rotatey(-100deg);}
    #bt:hover ~ #fd{transform:translate(400px,0px) perspective(1000px) rotatey(100deg);}
    --></style>

    Deux images en 800x600px ... et pi c'est tout !

    Le cadre du montage (fr) reçoit une image en fond, dimensionnée ici en 800x600px.

    Un bouton invisible (bt) est placé en invisible, au dessus de l'image qui sera animée, de façon a être fixe alors que l'image animée va se déplacer.

    L'image du montage est divisée en 2 parties, placées en fond d'une partie gauche (fg) et d'une partie droite (fd), chacune recevant la partie correspondante  par background-position:left et right.

    Chacune des deux parties reçoit un attribut pour définir la point de référence de l'animation: transform-origin:center left et right; de façon à ce que la partie gauche tourne autour de son côté gauche et celle de droite, de son coté droit.

    Le code de rotation est obtenu par une rotation selon l'axe vertical et de la perspective.

    Plus la valeur de la perspective est faible et plus l'effet perspective est important.