Div putar dan kembangkan untuk memaparkan galeri grid menggunakan JavaScript

Question

Saya mahu div berputar pada klik untuk menunjukkan galeri grid di belakang.

Sejujurnya, saya tidak tahu dari mana hendak bermula.

<ul class="container-fluid text-center row" id="gallery2">
  <li class="col-12 col-sm-4 col-md-12 text-center" ><img src="/vw-front-painted.jpg" class="img-fluid rounded" width="200" height="200" id="vw"><img src="/bmw-side-paint-out.jpg" class="img-fluid rounded"width="200" height="200"><img src="/scort-front-paint-out.jpg" class="img-fluid rounded" width="200" height="200"></li>
  <li class="col-12 col-sm-4 col-md-12 text-center"><img src="/jag-paint-out.jpg" class="img-fluid rounded" width="200" height="200"><img src="/scoob-finish-front-out.jpg" class="img-fluid rounded" width="200" height="200"><img src="/vw-t4-rear-painted.jpg" class="img-fluid rounded" width="200" height="200"></li>
</ul>

Ini HTML saya. Saya mahu setiap imej dikembangkan dan diputar untuk menunjukkan galeri grid di belakang imej asal. Saya belum melancarkan sebarang JavaScript lagi, ia dibina dengan Bootstrap, tetapi saya mempunyai CSS, cuma saya belum menggunakannya pada bahagian ini lagi.

Answer 1

Cuba yang berikut

Selain itu, saya tidak pasti ia akan memutar div, mungkin ia akan, tetapi ia harus memutarkan imej. CSS/HTML saya boleh digambarkan sebagai "mencukupi".

Saya mengadaptasi daripada halaman ini: code-boxx