Div rotate and expand using JavaScript to display grid gallery

Question

I want a div to rotate onclick to show the grid gallery on the back.

Honestly, I don't know where to start.

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

This is my HTML. I want each image to be expanded and rotated to show the grid gallery on the back of the original image. I haven't fired up any JavaScript yet, it's built with Bootstrap, but I do have the CSS, I just haven't applied it to this part yet.

Answer 1

Try the following

Also, I'm not sure it will rotate the div, maybe it will, but it should rotate the image. My CSS/HTML can be described as "adequate".

I adapted from this page: code-boxx