CSS 变换旋转和缩放在悬停时不起作用

Question

我正在尝试在悬停时旋转和缩放超链接，但它不起作用。 我做错了什么？

.HTML：

<footer class="footer">
<p class="footer__attribution">
Challenge by <a class="footer__link" href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a class="footer__link" href="#">Simeon Udoh</a>.
</p>
</footer>

.CSS：

.footer {
&__link,
&:link,
&:visited {
color: $color-grey-light; 
transition: all .2s ease-in;  
text-decoration: none; 
text-transform: uppercase; 
background-color: $color-dark-blue;
cursor: pointer;
&:hover,
&:active {
transform: rotate(5deg) scale(1.3);
color: $color-red; 
box-shadow: 0 1rem 2rem rgba($color-black, .1);
}
}

Answer 1

transform属性可以应用于可转换元素。

可转换元素 ^引用

可转换元素是以下类别之一中的元素：

• 布局由 CSS 框模型控制的所有元素，但未替换的内联框、表列框和表列组框 [CSS2] 除外，
• 所有 SVG 绘制服务器元素、clipPath 元素和 SVG 可呈现元素，文本内容元素 [SVG2] 的任何后代元素除外。

在这种情况下，请使用display: inline-block定位点：

.footer__link, .footer:link, .footer:visited {
color: #d3d3d3;
transition: all 0.2s ease-in;
text-decoration: none;
text-transform: uppercase;
background-color: #00008B;
cursor: pointer;
}
.footer__link:hover, .footer__link:active, .footer:link:hover, .footer:link:active, .footer:visited:hover, .footer:visited:active {
display: inline-block;
transform: rotate(5deg) scale(1.3);
color: red;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

<footer class="footer">
<p class="footer__attribution">
Challenge by <a class="footer__link" href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a class="footer__link" href="#">Simeon Udoh</a>.
</p>
</footer>