Question

在Y轴上旋转时遇到麻烦。我希望图像不被镜像。我想念什么？

/*Here is where we flip the image*/
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 325px;
  border: 1px solid black;
  perspective: 1000px;
  padding: 25px;
  left: 50%;
  margin-left: 425px;
}
/*Needed to position the front and back*/
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/*Horizontal flip*/
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg)
}
/*Position front and back*/
.flip-box-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
/*Style the back side*/
.flip-box-back {
  transform: rotateY(180deg)
}

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="assets/frank-herbert.jpeg" alt="A photo of Frank Herbert at 50 years old." style="height: 325px;width: 3000px;">
    </div>
    <div class="flip-box-back">
      <img src="assets/dune-hardcover.jpg" alt="The cover of the Dune Novel." style="height:325px; width:300px;">
    </div>
  </div>
</div

通过.flip-box-back类，它可以解决问题，但是当旋转回到第一张图像时，它就变成了麻烦。

Answer 1

只需像在前面那样向后添加backface-visibility: hidden;：

/*Here is where we flip the image*/
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 325px;
  border: 1px solid black;
  perspective: 1000px;
  padding: 25px;
  left: 50%;
}
/*Needed to position the front and back*/
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/*Horizontal flip*/
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg)
}
/*Position front and back*/
.flip-box-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
/*Style the back side*/
.flip-box-back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="assets/frank-herbert.jpeg" alt="A photo of Frank Herbert at 50 years old." style="height: 325px;width: 3000px;">
    </div>
    <div class="flip-box-back">
      <img src="assets/dune-hardcover.jpg" alt="The cover of the Dune Novel." style="height:325px; width:300px;">
    </div>
  </div>
</div

如何消除旋转的镜像效果

1 个答案: