将图像从前视图旋转到左视图，具有 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

修改rotateX为rotateY，因为左视图使用垂直轴。修改transform-origin为left，我们以左侧为旋转点进行变换。对伪元素应用类似的更改以获得 3D 外观，如 @kaiido 提到的。我已经评论了所做的更改。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

利用rotateX到rotateY你还必须设置transform-origin并position使其:after在左侧换行小提琴： https:&nbsp;//jsfiddle.net/hellooutlook/6sagLtpk/2/body {&nbsp; height: 100vh;&nbsp; margin: 0;}.thumb {&nbsp; margin: 100px;&nbsp; width: 600px;&nbsp; height: 400px;&nbsp; perspective: 1000px;}.thumb a {&nbsp; display: block;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");&nbsp; background-size: 0, cover;&nbsp; transform-style: preserve-3d;&nbsp; transition: all 0.5s;}.thumb:hover a {&nbsp; transform: rotateY(60deg);&nbsp; /* From rotateX */&nbsp; transform-origin: left;&nbsp; /* From bottom */}.thumb a:after {&nbsp; content: '';&nbsp; position: absolute;&nbsp; left: 0;&nbsp; bottom: 0;&nbsp; width: 30px;&nbsp; height: 100%;&nbsp; background: inherit;&nbsp; background-size: cover, cover;&nbsp; background-position: bottom;&nbsp; transform: rotateY(110deg);&nbsp; transform-origin: left;&nbsp; /* extra */&nbsp; border-top-right-radius: 3px;&nbsp; border-bottom-right-radius: 3px;}.thumb a:before {&nbsp; content: '';&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; background: rgba(0, 0, 0, 0.5);&nbsp; box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);&nbsp; transition: all 0.5s;&nbsp; opacity: 0.15;&nbsp; transform: rotateX(15deg) translateZ(-40px) scale(0.75);&nbsp; transform-origin: bottom;}.thumb:hover a:before {&nbsp; opacity: 1;&nbsp; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);&nbsp; transform: rotateX(0) translateZ(-60px) scale(0.85);}<div class="thumb">&nbsp; <a href="#"></a></div>