Question

我有一个产品div，每当我将鼠标悬停在它上面时，它会旋转并显示另一面，它可以工作，除了事情之外它变得更小了，这里有一个关于它看起来像什么的概念{{3 }}

＆＃13;

.product {
  transform: scale(1.5);
  transition: transform 1s cubic-bezier(.1, -.60, .50, 1.2);
  perspective: 700px;
  transform-style: preserve-3d;
}
.inner img {
  height: 65px;
  width: 65px;
}
.product:hover {
  transform: rotateY(-180deg);
}
.product:hover .side-b {
  transform: rotateY(180deg);
  display: block;
}
.product:hover .side-a {
  visibility: hidden;
}
.product-desc {
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  /* For centering text inside .photo-overlay */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
  line-height: 0;
}

＆＃13;

<li>
  <div class="product">
    <div style="height: 7px;visibility: hidden;"></div>
    <div class="inner">
      <img class="side-a" src="../images/test.jpg" alt="International Space Station">
      <div class="product-desc side-b">
        <h3>hi</h3>
        <a href="#" class="button">buy</a>
      </div>
    </div>
  </div>
</li>

＆＃13;

Answer 1

调整大小是因为您的第一个规则transform: scale(1.5);。它告诉浏览器最初将.product元素的大小调整为比原始大小多50％。但是，与悬停时相比，您只能通过循环语句覆盖transform - 规则。您可以删除此第一条规则，也可以在:hover定义中使用它：

.product:hover {
  transform: scale(1.5) rotateY(-180deg);
}

Answer 2

transform: scale(1.5);造成了问题！感谢@Mohd Asim Suhail指出它！

变换：规模（1.5）;正在为你创造问题， - Mohd Asim Suhail 3分钟前

rotateY或rotateX只是让我的照片在旋转时变小

2 个答案: