CSS-反旋转式旋转效果

Question

因此，我想创建一组满足以下属性的按钮：

• 形状是梯形的等化属性（目前是通过 transform：perspective：perspective（200px）rotatex（-35deg）（-35deg）
• hover，intust intut颜色和文本颜色交换（目前是通过悬挂代码实现的）
• 按钮文本没有旋转（目前是通过反旋转来实现的 rotatex（35DEG）在跨越）

到目前为止，它们看起来像这样： 悬停之前的按钮

但是，在悬停时，发生这种情况，这发生了所有按钮：

”按钮悬停

在我的测试中，是由代码的 btn-trapezoid-outline跨度范围部分引起的，但是将其删除使文本以某种方式旋转。您对如何修复有任何想法吗？

相关代码如下：

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

谢谢， 标记

Answer 1

尝试将转换风格移动：Preserve-3D; 转移到 .btn-Trapezoid-Outline 的父母。由于您在该元素本身上应用转换和观点，因此它仅保留其子元素的3D，而它仍然在平坦的空间中，

这里是源文档，解释了原因： https://developer.mozilla.org/en-us/docs/web/css/transform-style

Answer 2

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>

转换风格的CSS属性设置了元素的子女是位于3D空间中还是在元素平面中扁平。

所以我认为您需要转换风格： Preserve-3D;我认为这是“ .btn”，

我认为这是“ .btn”，这是不需要做梯形形状的，因为它可以轻松完成

编辑：如果由于某种原因仍然要使用相同的代码，则可以使用Translatey（-10px）跨越悬停在悬停求解此问题