css - 变换:尺度问题

Question

我有一个 div，我试图在悬停时缩放它(只是 Y)。问题是它在没有过渡的情况下运行良好。当我使用过渡时，div 在顶部缩放一点然后下降，检查 fiddle 。问题是如何防止 div 那样缩放？我希望它直接向下缩放，而不是弹到顶部。 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;

出于同样的原因(避免在错误的时间在 transform-origin 上进行转换)。