Question

我有一个div，我试图在悬停时缩放它（只是Y）。问题是它在没有过渡的情况下运行良好。当我使用过渡时，div在顶部稍微缩放然后向下，检查问题是如何防止div像这样sc？？我希望它能够直接向下缩放，而不是将其弹到顶部。 http://jsfiddle.net/q9akawr6/21/

HTML

<div></div>

CSS

div{
  width:100px;
  height:100px;
  margin:100px;
  background-color:red;
  transition:.2s;
}
div:hover
{
  transition:.2s;
  transform-origin:top;
  transform:scaleY(2.0);
}

Answer 1

正如Niet所说，或者只是将其放在div{}规则中，而不是div:hover{}：

transition:.2s;
transform-origin:top;

出于同样的原因（避免在错误的时间转换变换原点）。

Answer 2

由于你的边缘区域，div跳跃。我试着改变你的代码。检查以下

HTML：

<div class="container">

<div class="demo"></div>

</div>

CSS：

div.container
{
  width:300px;
  height:300px;
  border:1px solid gray;
}
div.demo{
  width:100px;
  height:50px;
  margin: 100px auto;
  background-color:red;
  transition:.2s;
  transform-origin: left top;
}
div.demo:hover
{
  transition:all .2s linear;
  transform-origin: top;
  transform:scaleY(2.0);
}

变换：规模问题

2 个答案: