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

Question

我有一个产品 div 每当我将鼠标悬停在它上面时，它就会旋转并显示另一面，它可以正常工作，但问题是它变小了，下面是它的外观 here.

.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 指出！

transform: scale(1.5); is creating problem for you, – Mohd Asim Suhail 3 mins ago

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

rotateY or rotateX just make my picture smaller when they rotate it

html

css

css-transforms