Clever Geek Handbook

CSS3 transform: scaling results in translation?

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>
Run code


in which scaling is assumed Link

. However, it shifts to the left. What is the problem?

+3


source to share


1 answer 


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

        
        
        
      

    
<a href=#>Link</a>
Run code




You should use display: inline-block for it to work. If that's what you're looking for, +1.

+4


source






More articles:


All Articles