CSS - counter rotateX messes up on-hover effect

Question

So I want to create a set of buttons that satisfies the following properties:

• Shape is an isosceles trapezoid (this is currently achieved by transform: perspective(200px) rotateX(-35deg)
• On hover, the button background colour and text colour swap (currently achieved by on-hover code)
• Button text is not rotated whatsoever (currently achieved by a counter-rotation of rotateX(35deg) in the span)

So far, they look like this: Buttons before hovering

But upon hover, this happens, to all buttons:

Button after hovering

From my testing, it's caused by the btn-trapezoid-outline span section of the code, but removing it leaves the text rotated in some way. Do you have any ideas on how this can be fixed?

Relevant code is below:

body {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #121212;
    text-align: center;
    padding-top: 50px;
  }


  
  .btn-wrap{
    margin: 25px 0px;
    width:100%;
    text-align: center;
  }
  
  .btn{

    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: none;
  }
  
  .btn-trapezoid-outline{
    display: inline-block;
    color: #fcec0c;
    transform-style: preserve-3d;
    padding: 20px 40px;
    border: 1px solid #fcec0c;
    transform: perspective(200px) rotateX(35deg) translateZ(25px) translateY(14.4px);
    -webkit-backface-visibility: hidden;
    transition: all .3s ease-out;
    margin: 0px 30px;
    
  }

  .btn-trapezoid-outline span {
    display:inline-block;
    transform:perspective(200px) rotateX(-35deg);
      /* Safari */
  -webkit-transform: rotateX(-35deg);
  /* Firefox */
  -moz-transform: rotateX(-35deg);
  /* Opera */
  -o-transform: rotateX(-35deg);
  /* IE */
  -ms-transform: rotateX(-35deg);
  }
  
  .btn-trapezoid-outline:hover{
    background: #fcec0c;
    color: #121212;
  }

Thanks, Mark

Answer 1

body {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #121212;
    text-align: center;
    padding-top: 50px;
  }


  
  .btn-wrap{
    margin: 25px 0px;
    width:100%;
    text-align: center;
  }
  
  .btn{

    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: none;
  }
  
  .btn-trapezoid-outline{
    display: inline-block;
    color: #fcec0c;
    transform-style: preserve-3d;
    padding: 20px 40px;
    border: 1px solid #fcec0c;
    transform: perspective(200px) rotateX(35deg) translateZ(25px) translateY(14.4px);
    -webkit-backface-visibility: hidden;
    transition: all .3s ease-out;
    margin: 0px 30px;
    
  }

  .btn-trapezoid-outline span {
    display:inline-block;
    transform:perspective(200px) rotateX(-35deg);
      /* Safari */
  -webkit-transform: rotateX(-35deg);
  /* Firefox */
  -moz-transform: rotateX(-35deg);
  /* Opera */
  -o-transform: rotateX(-35deg);
  /* IE */
  -ms-transform: rotateX(-35deg);
  transition: all .3s ease-out;
  }
  
  .btn-trapezoid-outline:hover{
    background: #fcec0c;
    color: #121212;
  }
  .btn-trapezoid-outline:hover span {
    -webkit-transform: rotateX(-35deg) translateY(-5px);
  }

<div class="btn-wrap">
  <a href="#" class="btn btn-trapezoid-outline">
    <span>Link 1</span>
  </a>
  <a href="#" class="btn btn-trapezoid-outline">
    <span>Link 2</span>
  </a>
  <a href="#" class="btn btn-trapezoid-outline">
    <span>Link 3</span>
  </a>
</div>

The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

so I think you need transform-style: preserve-3d; set to parent, I am guessing it is ".btn"

In my opinion it's all unnecessary to make Trapezoid shape because it can be done easily https://css-tricks.com/the-shapes-of-css/

Edit: If you still want to use the same code for some reason, you can use translateY(-10px) to span on hover solve this quickly