Div 使用 JavaScript 旋转和展开以显示网格图库

Question

我想让一个 div 旋转 onclick 以显示背面的网格画廊。

老实说，我不知道从哪里开始。

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

这是我的 HTML。 我希望每个图像都能展开并旋转，以在原始图像的背面显示网格图库。 我还没有启动任何 JavaScript，它是用 Bootstrap 构建的，但我确实有 CSS，只是现在还没有应用于此部分。

Answer 1

尝试以下操作

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

我改编自此页面：code-boxx