Carrés rotation

8 images en 1200x675px, ratio 16/9, dans un montage de cette dimension.

<div style="width:1200px; height:675px; margin:50px 0 0 -25px;">

<p id="cc">CLIC</p>

<input id="car1" class="car" type="text">

<input id="car2" class="car" type="text">

<input id="car3" class="car" type="text">

<input id="car4" class="car" type="text">

<input id="car5" class="car" type="text">

<input id="car6" class="car" type="text">

<input id="car7" class="car" type="text">

<input id="car8" class="car" type="text">

<input id="car0" type="text">  

</div>

<style><!--

#car0{position:absolute; z-index:1; width:1200px; height:675px; margin-top:0px; background:transparent; outline:none; border:none;}

#cc{position:absolute; z-index:3; width:120px; font-size:40px; transform:translate(50px,50px);}

.car{position:absolute; z-index:3; width:675px; height:675px; margin-top:0px; transition:all 1s;}

#car1{box-sizing:border-box; border:2px solid grey; background:url('https://i.goopics.net/s466ga.jpg'); background-size:1200px 675px; background-position:-262px 0px; transform:translate(262px,0px) scale(1) rotate(0deg);}

#car2{box-sizing:border-box; border:3px solid white; background:url('https://i.goopics.net/8n2rnr.jpg'); background-size:1200px 675px; background-position:-262px 0px;transform:translate(262px,0px) scale(0.73) rotate(30deg);}

#car3{box-sizing:border-box; border:4px solid white; background:url('https://i.goopics.net/3biop8.jpg'); background-size:1200px 675px; background-position:-262px 0px; transform:translate(262px,0px) scale(0.53) rotate(60deg);}

#car4{box-sizing:border-box; border:5px solid white; background:url('https://i.goopics.net/q4wqew.jpg'); background-size:1200px 675px; background-position:-262px 0px; transform:translate(262px,0px) scale(0.39) rotate(90deg);}

#car5{box-sizing:border-box; border:6px solid white; background:url('https://i.goopics.net/r1d8e9.jpg'); background-size:1200px 675px; background-position:-262px 0px; transform:translate(262px,0px) scale(0.28) rotate(120deg);}

#car6{box-sizing:border-box; border:7px solid white; background:url('https://i.goopics.net/sg6chk.jpg'); background-size:1200px 675px; background-position:-262px 0px; transform:translate(262px,0px) scale(0.20) rotate(150deg);}

#car7{box-sizing:border-box; border:9px solid white; background:url('https://i.goopics.net/mez71p.jpg'); background-size:1200px 675px; background-position:-262px 0px; transform:translate(262px,0px) scale(0.14) rotate(180deg);}

#car8{box-sizing:border-box; border:11px solid white; background:url('https://i.goopics.net/cd5r8u.jpg'); background-size:1200px 675px; background-position:-262px 0px; transform:translate(262px,0px) scale(0.1) rotate(210deg);}

#car1:focus,#car2:focus,#car3:focus,#car4:focus,#car5:focus,#car6:focus,#car7:focus,#car8:focus{z-index:10; border:4px ridge white; width:1200px; background-position:0px 0px; transform:translate(0px,0px) scale(1); rotate(0deg);} 

#car1:focus~#car0,#car2:focus~#car0,#car3:focus~#car0,#car4:focus~#car0,#car5:focus~#car0,#car6:focus~#car0,#car7:focus~#car0,#car8:focus~#car0{z-index:10;}

--></style>

CLIC