CSS：变换原点答案

【问题标题】：CSS: transform-originCSS：变换原点
【发布时间】：2019-04-16 20:15:38
【问题描述】：

我在 CSS 中的转换有问题。

#test{
  height:100px;
  width: 100px;
  background-color: red;
  margin-left: 100px;
  margin-top: 100px;
}

#test:hover{
  transform : scale(2);
  transition:1s ease-in-out;
  transform-origin : left top;
}

问题是，当您将鼠标悬停在 div 上时，它会略微向上浮动，而我想要做的是坚持一个地方，并且仅在右侧和底部增长/重新缩放。

Here is codepen link.

希望你们明白我想说的话。

【问题讨论】：

检查您需要的转换原点 -- w3schools.com/cssref/css3_pr_transform-origin.asp
问题是，当我擦除过渡时没有问题..
ease-in-out - 指定一个缓慢开始和结束的过渡效果 - 这就是你想要的吗？ -- w3schools.com/css/css3_transitions.asp

标签： css css-transitions scale css-transforms

【解决方案1】：

您应该设置转换应该为哪个属性设置动画，在您的情况下，应该将transform 添加到transition: 1s ease-in-out;，例如transition: transform 1s ease-in-out;。

#test{
  height:100px;
  width: 100px;
  background-color: red;
  margin-left: 100px;
  margin-top: 100px;
}

#test:hover{
  transform : scale(2);
  transition: transform 1s ease-in-out;
  transform-origin : left top;
}

<div id="test">
  TEST
</div>

【讨论】：

【解决方案2】：

div{
    width:100px;height:100px;
    border:1px solid red; 



    transition-property: transform;
transition-duration: 200ms;
transition-timing-function: ease-in;
transition-delay: 50ms;
transform: scale(0, 0);
transform-origin: center left;


}
button:hover + div{
    transform: scale(1, 1)
}

<button>hello</button>

<div>status</div>

【讨论】：

【解决方案3】：

transform-origin 属性补充了 transform 属性。它允许我们使用 CSS 准确地告诉浏览器我们希望转换发生在什么坐标上。方法如下：

变换原点：[x][y]

将 x 和 y 分别替换为百分比值，例如中间位置的 50%、开始位置的 0% 和结束位置的 100%。我制作了一支笔来帮助您一劳永逸地理解这一点。

我在这里写了一篇完整的文章： https://medium.com/@RajaRaghav/understanding-css-transform-origin-property-2ef5f8c50777 有说明性的例子

【讨论】：