CSS - counter rotateX破坏悬停效果

Question

所以我想创建一组满足以下属性的按钮:

• Shape是一个等腰梯形(这是目前transform: perspective(200px) rotateX(-35deg)
实现的)
• 悬停时，按钮背景颜色和文本颜色交换(当前通过悬停代码实现)
• 按钮文本不旋转(目前通过在span中反向旋转rotateX(35deg)来实现)

到目前为止，它们看起来像这样:鼠标悬停前的按钮

但是悬停时，所有按钮都会发生这种情况:

鼠标悬停后的按钮

从我的测试中，它是由代码的btn-trapezoid-outline span部分引起的，但删除它会使文本以某种方式旋转。你有什么办法可以解决这个问题吗?

相关代码如下:

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

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>

transform样式的CSS属性设置元素的子元素是定位在3D空间中还是在元素的平面中被平化。https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

所以我认为你需要transform-style: preserve-3d;设置为parent，我猜是".btn">

在我看来，没有必要做出梯形，因为它很容易做到https://css-tricks.com/the-shapes-of-css/

编辑:如果你仍然想使用相同的代码，你可以使用translateY(-10px)来跨越悬停，快速解决这个问题

Answer 2

尝试将transform-style: preserve-3d;移动到.btn-trapezoid-outline的父节点。由于您正在对该元素本身应用转换和透视图，因此它只保留其子元素的3d，而它仍保持在平面空间

下面是解释原因的源文档:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style