Div faire pivoter et développer à l'aide de JavaScript pour afficher la galerie de grilles

Question

Je veux qu'un div pivote en cliquant pour afficher la galerie de grilles au dos.

Honnêtement, je ne sais pas par où commencer.

<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>

Voici mon code HTML. Je souhaite que chaque image soit agrandie et pivotée pour afficher la galerie de grilles au dos de l'image originale. Je n'ai pas encore lancé de JavaScript, il est construit avec Bootstrap, mais j'ai le CSS, je ne l'ai tout simplement pas encore appliqué à cette partie.

Answer 1

Essayez ce qui suit

De plus, je ne suis pas sûr que cela fera pivoter le div, peut-être que ce sera le cas, mais il devrait faire pivoter l'image. Mon CSS/HTML peut être décrit comme « adéquat ».

J'ai adapté de cette page : code-boxx