主页 / 问题 / 1439731
Accepted
TinturSoft
Asked:2022-08-16 14:51:49 +0000 UTC2022-08-16 14:51:49 +0000 UTC

变换：透视图未应用于 safari

  • 772

专家，有问题。我显示了一个带有 transform: perspective 属性的块，而在 iPhone 上，该块根本不显示。互联网铲了，并没有找到解决方案（我会很高兴任何提示

<div class="sale_15">
                <span class="sale_15_text">скидка 15%</span>
</div>

CSS：

.sale_15_text{
    font-size: 64px;
    font-weight: 900;
    color: #fff;

}
.sale_15{
    background: #FF4800;
    border-radius: 26px;

    width: 505px;
    height: 103px;
    margin-left: auto;
  margin-right: auto;
    text-align: center; 
    transform: perspective(278px) rotateY(10deg);
}
html css

1 个回答

  1. Best Answer

    自 v4 起桌面 Safari 上的功能perspective使用供应商前缀实现：-webkit- 自 v9 起完全支持。在手机上 iOS 上的 Safari 自 v2 起使用供应商前缀实现：-webkit- 自 v9 起完全支持。

    尝试添加前缀..并检查您的safari版本是否支持..

    .sale_15_text {
  font-size: 64px;
  font-weight: 900;
  color: #fff;
}

.sale_15 {
  background: #FF4800;
  border-radius: 26px;
  width: 505px;
  height: 103px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  -webkit-transform: perspective(278px) rotateY(10deg);
  /* Safari & Chrome */
  -moz-transform: perspective(278px) rotateY(10deg);
  /* Firefox */
  -ms-transform: perspective(278px) rotateY(10deg);
  /* Internet Explorer */
  -o-transform: perspective(278px) rotateY(10deg);
  /* Opera */
  transform: perspective(278px) rotateY(10deg);
}
    <div class="sale_15">
  <span class="sale_15_text">скидка 15%</span>
</div>

    • 1

相关问题