• Ouverture volets

    Un visiteur me signale qu'un de mes montages ne fonctionne pas chez lui alors qu'il fonctionne chez d'autres; cherchant à comprendre, je  reprends ici le code de base sans image.

    Chez moi, sous Linux Ubuntu, avec Firefox 58.0.2 et avec Chrome 64.0.3281.140 Oubuntu0.16.04.1.

    Survolez le montage.

     

     

     

    <div style="width:60vw; height:33.75vw; margin:1vh auto; background:green;">
    <p id="ouv">&nbsp;</p>
    <p id="cg">&nbsp;</p>
    <p id="cd">&nbsp;</p>
    </div>
    <style><!--
    #ouv{position:absolute; z-index:5; width:60vw; height:33.75vw;}
    #cg{position:absolute; z-index:1; width:30vw; height:33.75vw; background:brown; transform:translate(0vw,0vw) perspective(200vw) rotatey(0deg); transform-origin:center left; transition:all 1s linear;}
    #cd{position:absolute; z-index:1; width:30vw; height:33.75vw; background:brown; transform:translate(30vw,0vw) perspective(200vw) rotatey(0deg); transform-origin:center right; transition:all 1s linear;}
    #ouv:hover ~ #cg{transform:translate(0vw,0vw) perspective(50vw) rotatey(90deg);}
    #ouv:hover ~ #cd{transform:translate(30vw,0vw) perspective(50vw) rotatey(-90deg);}
    --></style>

    Voyons sans perspective au départ: En gros, ça fonctionne mais le volet droit fait un mouvement curieux en dépassant le cadre pour revenir à 90° ce qu'il ne fait pas si je remets perspective(200vw) au départ. Je ne pense pas que ce soit une bonne solution et pas logique !