```transform: skewX()``` property used with ```transition: all 0.5s``` is causing the page to jump d-CodePudding

I have written this styling for an <h2> heading. I've set a transition effect for when the heading is hovered over. But as the text skews, the page does a slight jump during the animation. How can I prevent that awkward jump without sacrificing the transition/animation effect? Try this styling while having another element just before the h2 to see the jump on that element when the h2 is hovered:

.heading-secondary {
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;

  display: inline-block;
  background-image: linear-gradient(
    to right,
    $color-primary-light,
    $color-primary-dark
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: all 0.5s ease-in-out;
  letter-spacing: 0.15rem;

  &:hover {
    letter-spacing: 0.2rem;
    transform: skewX(2deg) skewX(180deg);
  }
}

CodePudding user response：

Maybe need to make the body overflow or something hidden. Let's see a working example

.heading-secondary {
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  background-image: linear-gradient( to right, $color-primary-light, $color-primary-dark);
  background-clip: text;
  -webkit-background-clip: text;
  transition: all 0.5s ease-in-out;
  letter-spacing: 0.15rem;
}

.heading-secondary:hover {
  letter-spacing: 0.2rem;
  transform: skewX(2deg) skewX(180deg);
}

.container-overflow-hidden {
  overflow: hidden
}

<h1 >heading-primary</h1>
<div >
  <h2 >heading-secondary</h2>
</div>