所以我试图在元素上添加透视变换,但它正在切断Safari中的文本。如果您在Chrome中打开以下CodePen,则会正常显示,但在Safari中,白色文本会被截断。我搜索了其他问题但似乎没有解决我的问题。
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
答案 0 :(得分:2)
我今天面临同样的问题。我修复了将transform: translateZ(10px);
属性设置为正在剪切的文本的问题。将值更改为对您有意义的值。
答案 1 :(得分:0)
.field--name-residential-status {
height: 70px;
width: 100px;
position: relative;
}
.property-status {
display: inline-block;
color: white;
letter-spacing: 0.09375em;
padding: 1.2em 2em;
position: relative;
z-index: 1000;
padding-top: 1em;
text-transform: uppercase;
}
.property-status span {
position: absolute;
z-index: 5000;
-webkit-transform: translateZ(5000px);
}
.field--name-residential-status:before {
display: block;
content: "";
background-color: #2F2F2F;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2000;
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
-moz-transform: perspective(26.08696em) rotateX(-30deg);
-ms-transform: perspective(26.08696em) rotateX(-30deg);
-o-transform: perspective(26.08696em) rotateX(-30deg);
transform: perspective(26.08696em) rotateX(-30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}