CSS3转换:缩放导致翻译?

时间:2015-06-24 06:04:06

标签: html css transformation scaling

我有以下简单的HTML代码:



<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <style>
      body {
        padding: 30px;
      }
      a {
        display: block;
      }
      a:hover {
        transform: scale(2); 
        transition: all 4s;
      }
    </style>
  </head>
  <body>

    <a href=#>Link</a>

  </body>
</html>
&#13;
&#13;
&#13;

其中Link应该扩展。但是,它向左移动。有什么问题?

1 个答案:

答案 0 :(得分:4)

&#13;
&#13;
body {
  padding:30px;
}
a {
  display: inline-block;
  transition: all 4s;
}
a:hover {
  transform: scale(2); 
}
&#13;
<a href=#>Link</a>
&#13;
&#13;
&#13;

您应该使用 display:inline-block 来使其正常工作。如果它正是您要找的,请+1。