CSSの回転とスケーリングがホバーで機能しない

Question

ホバー時にハイパーリンクを回転させながら拡大しようとしていますが、うまいところ機能していません。 私は何が間違っていますか？どうしても違いがわかりません

.copyright,
.footer {
  &_link {
    color: #d3d3d3;
  background-color: #000000;
  text-decoration: none;

  transition: all 0.2s ease-in;

    &:hover,
    &:active {
      transform: rotate(15deg) scale(2);
    }
  }
}

html

<footer class="footer">
  <p class="copyright">
    あああ <a class="copyright_link" href="" target="_blank">あああ</a>、
    あああ <a class="footer_link" href="#">あああ</a>。
  </p>
</footer>

Answer 1

CSS Transforms Module Level 1 によれば、 transform プロパティの適用対象は transformable elements です。

§ 4. The transform Property

• Name: transform
• Value: none | <transform-list>
• Initial: none
• Applies to: transformable elements
• Inherited: no
• Percentages: refer to the size of reference box
• Computed value: as specified, but with lengths made absolute
• Canonical order: per grammar
• Animation type: transform list, see interpolation rules

transformable elements は非置換インラインボックス、 table-column ボックス、 table-column-group ボックスを除く CSS ボックスモデルによりレイアウトが制御可能な要素を指します。a 要素は非置換かつ inline flow であり、 transformable elements に該当しないため、 transform プロパティが適用されません。display: inline-block を a 要素へ適用することで、この問題を解決出来ます (動作確認用リンク)。

§ 2. Terminology

transformable element
A transformable element is an element in one of these categories:

• all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],

• all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].