Rotate image from front view to left view with 3D effect

Question

I am using the code below to rotate the image, but I can only achieve to rotate the image from front view to bottom view. I want to rotate the image from front view to left view. How can I achieve this?

body {
  height: 100vh;
  margin: 0;
}

.thumb {
  width: 600px;
  height: 400px;
  perspective: 1000px;
}

.thumb a {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
  background-size: 0, cover;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.thumb:hover a {
  transform: rotateX(80deg);
  transform-origin: bottom;
}

.thumb a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 36px;
  background: inherit;
  background-size: cover, cover;
  background-position: bottom;
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.thumb a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  opacity: 0.15;
  transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  transform-origin: bottom;
}

.thumb:hover a:before {
  opacity: 1;
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
  transform: rotateX(0) translateZ(-60px) scale(0.85);
}

<div class="thumb">
  <a href="#"></a>
</div>

Answer 1

1. Modify rotateX to rotateY since left view makes use of the vertical axis.

2. Modify the transform-origin to left as we are transforming with the left side as the rotating point.

3. Apply the similar changes to the pseudo elements for the 3D look as mentioned by @kaiido. I have commented the changes made.

body {
  height: 100vh;
  margin: 0;
}

.thumb {
  width: 600px;
  height: 400px;
  perspective: 1000px;
  margin: 100px; /* For snippet spacing */
}

.thumb a {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
  background-size: 0, cover;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.thumb:hover a {
  transform: rotateY(45deg); /* 1 - From rotateX */
  transform-origin: left; /* 2 - From bottom */
}

.thumb a:after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: 0;
  width: 36px; /* Interchanged width and height because horizontal transformation is now vertical transformation */ 
  height: 100%;
  background: inherit;
  background-size: cover, cover;
  background-position: bottom;
  transform: rotateY(90deg); /* 1 - From rotateX */
  transform-origin: left; /* 2 - From bottom */
}

.thumb a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  opacity: 0.15;
  transform: rotateY(15deg) translateZ(-40px) scale(0.75); /* 3 - From rotateX */
  transform-origin: bottom;
}

.thumb:hover a:before {
  opacity: 1;
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
  transform: rotateY(0) translateZ(-60px) scale(0.85); /* 3 - From rotateX */
}

<div class="thumb">
  <a href="#"></a>
</div>