Question

我在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

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

Answer 1

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 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>

Answer 3

transform-origin属性补充了transform属性。它使我们能够仅使用CSS来告诉浏览器确切的坐标是我们希望转换发生的位置。方法如下：

transform-origin：[x] [y]

分别用百分比值代替x和y，例如中间位置为50％，开始位置为0％，结束位置为100％。我用一支笔来帮助您一劳永逸地理解这一点。

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

CSS：transform-origin

3 个答案: