代码之家 › 专栏 › 技术社区 › Chris Rogers

css3多重转换:translate()和scale()

css-transitions css3

Chris Rogers · 技术社区 · 8 年前

我发现了如何使用 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() 开始投入。奇怪的是,我似乎无法交换。 转换() 和 尺度() 因为它会缩放,但当我这样做时不会转换。

我该如何改变它,以便 div 不上下移动吗?我希望两个变换都从一起开始,这样你就不会看到 div 从上到左开始。

1 回复 | 直到 8 年前

Chris Rogers 8 年前

我该如何更改此项,使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>

推荐文章

Luckkks · 过渡色工作不正常

1 年前

BogisW · CSS动画按钮/悬停时为span内容文本添加CSS转换

2 年前

markisawesome4 · 按钮:当您将鼠标移离按钮时,悬停时显示的内容下移后

3 年前

Bruno Oliveira · 如何在CSS转换完成后调用函数-React

3 年前

Ancross · 为什么我的小CSS动画不会触发?

4 年前

Jorge · :before和:after伪元素以接收过渡效果

8 年前

Arsalan Khattak · 线性渐变过渡

8 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

8 年前

Paul · 悬停时变换比例不缩放

8 年前

Willem van der Veen · CSS转换结合JS clickEvent

8 年前