Question

我发现如何使用How to apply multiple transforms in 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向上移动并离开开始。

Answer 1

如何改变这一点，以便div的顶部和左边不会向上和向左移动？

您首先停止移动它...并指定转换原点的位置：

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

CSS3多变换：translate（）和scale（）

1 个答案: