CSS3变换：缩放导致平移？

Question

CSS3变换：缩放导致平移？

3

I have the following simple HTML code:

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

有一个场景，其中Link应该是可以缩放的。但是它会向左移动。问题出在哪里？

- Randy Tang

1

你也可以使用 font-size: 2em;。 - odedta

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vanntile · Accepted Answer

body {
  padding:30px;
}
a {
  display: inline-block;
  transition: all 4s;
}
a:hover {
  transform: scale(2); 
}

<a href=#>Link</a>

你应该使用 display:inline-block 使其正常工作。如果这是你想要的，那么就点个赞吧。