我想让一个 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，只是现在还没有应用于此部分。