Question

我创建了一个带透视图的按钮，但其中的文本也随之旋转。如何让文本显示正常。我的代码中是否有任何错误。

这里是代码

.container {
    padding: 25px;
    border: solid 1px #bebebe;
    perspective: 200px;
    -webkit-perspective:200px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
 }

.box {
   display: table;
   background-color: red;
   margin-left: auto;
   margin-right: auto;
   width: 200px;
   height: 50px;
   transform: rotate3d(0,1,0,145deg);
   -webkit-transform: rotate3d(0,1,0,145deg); 
}

a {
  text-decoration: none;
  color: #fff;
  text-shadow: none;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 30px;
}

Answer 1

您的代码非常完美，只需旋转文字即可。因此，如果您在其中添加旋转变换效果，那么它将被修复。

a {
    transform: rotate3d(0,1,0,145deg);
    -webkit-transform: rotate3d(0,1,0,145deg); 
}

HERE IS A PEN WITH YOUR CODE CHECK THIS

如何创建透视按钮？

1 个答案: