CSS - counter rotateX messes up on-hover effect-CodePudding

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:

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

CodePudding user response：

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 >
  <a href="#" >
    <span>Link 1</span>
  </a>
  <a href="#" >
    <span>Link 2</span>
  </a>
  <a href="#" >
    <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

CodePudding user response：

Try moving the transform-style: preserve-3d; to the parent of .btn-trapezoid-outline. Since you are applying transform and perspective on that element itself, it is only preserving 3d of its child elements, while it remains in a flat space

Here is the source documentation that explains why: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style