Transform CSS-Eigenschaft funktioniert nicht mit Element [duplicate]

Question 1

Ich möchte scale(x,y) mein <a> Element, wenn ich darauf klicke, aber es funktioniert nicht. Ich verwende den Mozilla Firefox-Webbrowser, um das Programm auszuführen.

Hier ist mein Code:

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="https://stackoverflow.com/questions/29667859/xyz.html">click here</a></center>
    </body>
</html>

Question 2

transform gilt nicht für Inline-Elemente wie z <a>. Sie könnten den Link anzeigen als inline-block oder block Um die Transformation zum Laufen zu bringen:

transformierbares Element

Ein transformierbares Element ist ein Element in einer dieser Kategorien:

ein Element, dessen Layout vom CSS-Box-Modell bestimmt wird, das entweder a Block-Ebene oder atomare Inline-Ebene -Element oder dessen Anzeigeeigenschaft zu Tabellenzeile, Tabellenzeilengruppe, Tabellenkopfzeilengruppe, Tabellenfußzeilengruppe, Tabellenzelle oder Tabellenbeschriftung berechnet wird […]

Woher atomare Inline-Ebene Zu den Elementen gehören:

Ersetzte Inline-Level-Elemente, Inline-Block-Elemente und Inline-Table-Elemente

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

Außerdem gibt es keine anklicken Zustand in CSS verfügbar. Mögliche Optionen sind :active oder :hoveroder verwenden 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="https://stackoverflow.com/questions/29667859/xyz.html">click here</a>

Question 3

Benutzen display:block und ihm eine Höhe und Breite geben

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="https://stackoverflow.com/questions/29667859/xyz.html">click here</a>
</center>