Bidouille pour ouverture des volets

ex p3014201

... à la base c'est une idée de pourquoipas732     ...interprétée ici avec des dimensions et des identifiants plus explicites...

Code de cette animation html/css (pas de JavaScript):

Url fond jaune image de fond
Url fond bleu image volet de gauche
Url fond vert image volet de droite

HTML

 <p>&nbsp;</p>
<div style="width: 540px; height: 300px; margin: 40px auto 40px auto; border: 5px solid #9b7bba; background: url('http://ekladata.com/xkDCol5B5zBVaAHaoasHEl_0SP4.jpg'); background-size: 540px 300px;">
<p id="fenetre">&nbsp;</p>
<p id="voletG">&nbsp;</p>
<p id="voletD">&nbsp;</p>
</div>
<p>...</p>

CSS

<style><!--
#fenetre{position:absolute; z-index:2; width:540px; height:300px;}

#voletG{position:absolute; z-index:1; width:270px; height:300px; background:url('http://ekladata.com/Z4UeFNiA4fPH9_2KNNCem85nSlE/VoletG.jpg'); background-size:540px 300px; background-position:center left; transform-origin: center left;  transform:translate(0px,0px) rotatey(0deg) ; transition:all 0.5s linear;}

#voletD{position:absolute; z-index:1; width:270px; height:300px; background:url('http://ekladata.com/jEuRxJU7z6ck9tI8x8hOksC-sYE/VoletD.jpg'); background-size:540px 300px; background-position:center right; transform-origin: center right; transform:translate(270px,0px) rotatey(0deg); transition:all 0.5s linear 0.5s;}

#fenetre:hover ~ #voletG{transform:translate(0px,0px) perspective(2400px) rotatey(-97deg);}
#fenetre:hover ~ #voletD{transform:translate(270px,0px) perspective(2400px) rotatey(98deg);}
--></style>
<p>&nbsp;</p>