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

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">
</div>

Answer 1

Modify rotateX to rotateY since left view makes use of the vertical axis.
Modify the transform-origin to left as we are transforming with the left side as the rotating point.
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">
</div>

Answer 2

#manoj-kumar is right.
make use of rotateX to rotateY
also you have to set transform-origin and position for the :after to make it wrap on left
fiddle : https://jsfiddle.net/hellooutlook/6sagLtpk/2/
body {
height: 100vh;
margin: 0;
}
.thumb {
margin: 100px;
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: rotateY(60deg);
/* From rotateX */
transform-origin: left;
/* From bottom */
}
.thumb a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 100%;
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateY(110deg);
transform-origin: left;
/* extra */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.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(15deg) translateZ(-40px) 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">
</div>