Montage 2

Même principe que Montage1, animation au clic maintenu mais avec une animation de rotation.

Juste un attribut à ajouter:rotatey(180deg).

<div style="width:60vw; height:33.75vw; margin:1vh auto; border:0.6vh ridge white;">
<p id="p1" class="par">&nbsp;</p>
<p id="p2" class="par">&nbsp;</p>
<p id="p3" class="par">&nbsp;</p>
<p id="p4" class="par">&nbsp;</p>
<p id="p5" class="par">&nbsp;</p>
<p id="p6" class="par">&nbsp;</p>
<p id="p7" class="par">&nbsp;</p>
<p id="p8" class="par">&nbsp;</p>
<p id="p9" class="par">&nbsp;</p>
</div>
<style><!--
.par{position:absolute; z-index:1; width:19.5vw; height:11vw; border:0.25vw solid white; transition:all 1s linear;}
#p1{transform:translate(0vw,0vw) rotatey(180deg); background:url('http://ekladata.com/SiB3973B_WiHKOzdqe8fhlJj6Aw.jpg'); background-size:cover;}
#p2{transform:translate(20vw,0vw) rotatey(180deg); background:url('http://ekladata.com/SF8iWNLes4dksPV-aSQLM4smZCY.jpg'); background-size:cover;}
#p3{transform:translate(40vw,0vw) rotatey(180deg); background:url('http://ekladata.com/Rds1H90k4JiPmb29Xaj0J3htmzU.jpg'); background-size:cover;}
#p4{transform:translate(0vw,11.25vw) rotatey(180deg); background:url('http://ekladata.com/NIcXVMAD8aSxriPrGHOo-gVCjOQ.jpg'); background-size:cover;}
#p5{transform:translate(20vw,11.25vw) rotatey(180deg); background:url('http://ekladata.com/vUC_YgO7odoWG8f_p3rpkzJCbT8.jpg'); background-size:cover;}
#p6{transform:translate(40vw,11.25vw) rotatey(180deg); background:url('http://ekladata.com/lsMxZtkSBbngmyZQeBI-We_KX7c.jpg'); background-size:cover;}
#p7{transform:translate(0vw,22.5vw) rotatey(180deg); background:url('http://ekladata.com/a-jSXOY6Fo1EcfF37uV4Xd6N-4Q.jpg'); background-size:cover;}
#p8{transform:translate(20vw,22.5vw) rotatey(180deg); background:url('http://ekladata.com/oqNarTVSaEL3hvwkaF_55vkVoco.jpg'); background-size:cover;}
#p9{transform:translate(40vw,22.5vw) rotatey(180deg); background:url('http://ekladata.com/quPRXFGUI2Vby5UCyymSfKNtRTI.jpg'); background-size:cover;}
#p1:active,#p2:active,#p3:active,#p4:active,#p5:active,#p6:active,#p7:active,#p8:active,#p9:active{z-index:10; width:60vw; height:33.75vw; border:none; transform:translate(0vw,0vw) rotatey(0deg);}
--></style>