使用3D效果将图像从前视图旋转到左视图

Question

我使用下面的代码来旋转图像，但我只能实现将图像从前视图旋转到底视图。我想将图像从前视图旋转到左视图。我怎样才能做到这一点？

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. 将rotateX修改为rotateY，因为左视图使用垂直轴。

2. 当我们以左侧为旋转点进行变换时，将transform-origin修改为left。

3. 将类似的更改应用于@kaiido提到的3D外观的伪元素。我已经对所做的更改发表了评论。

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>

Answer 2

@manoj kumar是对的。利用rotateX到rotateY

你还必须为:after设置transform-origin和position，使其包裹在左上

小提琴：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">
<a href="#"></a>
</div>