Свойство Transform CSS не работает с элементом

Я хочу элемент scale(x,y) my <a>, когда я нажимаю на него, но он не работает. Я использую браузер Mozilla Firefox для запуска программы.

Вот мой код:

scaleElement.html

<html>
    <head>
        <title>CSS3 Transform and Transition</title>
        <style>
            a{
                background-color: green;
                color: white;
                padding: 10px 20px;
                text-decoration: none;
                border: 2px solid #85ADFF;
                border-radius: 30px 10px;
                transition: 2s;
            }
            a:hover{
                transform: scale(2,2);
            }
        </style>
    </head>

    <body>
        <center><a href="xyz.html">click here</a></center>
    </body>
</html>

Ответы

Ответ 1

transform не применим к встроенным элементам, таким как <a>. Вы можете отобразить ссылку как inline-block или block, чтобы заставить преобразование работать:

преобразуемый элемент

Преобразуемый элемент является элементом в одной из этих категорий:

  • элемент, макет которого определяется моделью окна CSS, которая является либо блочным уровнем, либо атомарным встроенным уровнем элементом или чей дисплей свойство вычисляет таблицу-строку, таблицу-строку-группу, таблицу-заголовок-группу, table-footer-group, table-cell или table-caption [...]

Где атомные встроенные уровни включают:

заменены элементы линейного уровня, элементы встроенного блока и встроенные элементы таблицы

a { display: inline-block; }
a:hover { transform: scale(2,2); }

Кроме того, в CSS нет состояния щелчка. Возможные варианты: :active или :hover, или checkbox hack.

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: all 2s;
  display: inline-block; /* <-- added declaration */
}
a:hover{ transform: scale(2,2); }
/* just for demo */
body { padding: 2em; text-align: center; }
<a href="xyz.html">click here</a>

Ответ 2

Используйте display:block и придайте ему высоту и ширину

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: 2s all ease-in;
  display: block;
  width:100px;
  height:50px;
}
a:hover {
  transform: scale(2, 2);
}
<center><a href="xyz.html">click here</a>
</center>