I want to make a div rotate onclick to reveal a grid gallery on the rear face.
I honestly 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 the HTML I have. I want each image to expand and rotate onclick to show a grid gallery on the rear of the original img. I haven't started any JavaScript and it's built with Bootstrap, but I do have CSS just not applied to this section right now.
Try the following
<style>
.rotate-me { transform: rotate(90deg) }
</style>
Also, I'm not sure it will rotate a div, maybe it will, but it should rotate an image. My CSS / HTML can best be described as "adequate."
I adapted this from this page: code-boxx