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