CSS转换旋转和缩放无法在悬停上使用

我试图在悬停时旋转和缩放超链接，但是它不起作用。我怎么了？

HTML：

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);
}
}


transform属性可以应用于可变形元素。

  

可变形元素 ^ref

  
  

可变形元素是以下类别之一的元素：

  
  

  
• 所有布局均由CSS盒模型控制的元素，除了不可替换的嵌入式盒，表列盒和表列组盒[CSS2]，

  
• 所有SVG绘制服务器元素，clipPath元素和SVG可渲染元素，但文本内容元素[SVG2]的任何后代元素除外。

  

在这种情况下，请使用display: inline-block作为锚点：