rotateY 或 rotateX 只是在旋转图片时使我的图片变小

Question

我有一个产品div，每当我将鼠标悬停在它上面时，它都会旋转并显示另一边，它可以工作，但问题是它变小了，这里有一个想法它在这里的样子。

.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;
}

<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>

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分钟前