将图像从前视图旋转到左视图，具有 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. 对伪元素应用类似的更改以获得 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: //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>