css - CSS3 多重变换： translate() 和 scale()

Question

我发现了如何通过如何在 CSS 中应用多个转换来应用多个转换？但我想知道如何更好地控制它们。

#box {
  width: 100px;
  height: 100px;
  font-family: "Arial";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
  border-radius: 25%;
  transition: 0.5s ease-in-out;
}
            
#box:hover {
  transform: scale(2, 2) translate(25px, 25px);
}

<div id="box">Text</div>

动画从开始scale()之前translate()开始。奇怪的是，我似乎无法交换translate()和scale()左右，因为它会缩放但在我这样做时不会翻译。

如何更改它以使顶部和左侧div不会向上和向左移动？我希望两个变换一起开始，这样你就不会看到div向上移动和向左移动的外观。

标签： csscss-transitions

Answer 1

如何更改此设置以使 div 的顶部和左侧不会向上和向左移动？

您首先停止移动它......并指定您希望转换的原点在哪里：

#box {
  width: 100px;
  height: 100px;
  font-family: "Arial";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
  border-radius: 25%;
  transition: 0.5s ease-in-out;
  transform-origin: top left; /* add this in */
}
            
#box:hover {
  transform: scale(2, 2); /* no translate here */
}

<div id="box">Text</div>