Div drehen und erweitern, um mithilfe von JavaScript eine Rastergalerie anzuzeigen

Question

Ich möchte, dass sich ein Div beim Klicken dreht, um die Rastergalerie auf der Rückseite anzuzeigen.

Ehrlich gesagt weiß ich nicht, wo ich anfangen soll.

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

Das ist mein HTML. Ich möchte, dass jedes Bild erweitert und gedreht wird, um die Rastergalerie auf der Rückseite des Originalbilds anzuzeigen. Ich habe noch kein JavaScript gestartet, es ist mit Bootstrap erstellt, aber ich habe das CSS, ich habe es nur noch nicht auf diesen Teil angewendet.

Answer 1

尝试以下操作

另外，我不确定它会旋转 div，也许会，但它应该旋转图像。我的 CSS / HTML 可以用“足够”来形容。

我改编自此页面：code-boxx