Div Spin and expand with JavaScript to display grid gallery-CodePudding

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  id="gallery2">
  <li  ><img src="/vw-front-painted.jpg"  width="200" height="200" id="vw"><img src="/bmw-side-paint-out.jpg" width="200" height="200"><img src="/scort-front-paint-out.jpg"  width="200" height="200"></li>
  <li ><img src="/jag-paint-out.jpg"  width="200" height="200"><img src="/scoob-finish-front-out.jpg"  width="200" height="200"><img src="/vw-t4-rear-painted.jpg"  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.

CodePudding user response：

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