CSS Transform rotate and scale not working on hover

Question

I'm trying to rotate and scale a hyperlink on hover but it's not working. what did I get wrong?

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

        }
    }

I think you have an issue with your SCSS scopes. I tried with CSS and it worked. — Jonathan Aurry, Dec 07 '19 at 14:50

score 0 · Accepted Answer · answered Dec 07 '19 at 14:38

The transform property can be applied to transformable elements.

transformable element^ref

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].

In this case, use display: inline-block to the anchor:

.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>

CSS Transform rotate and scale not working on hover

1 Answers1