Question

transform：skew在Safari中无法正常工作。

在Chrome和Firefox中运行完美，但在Safari中则不行。

如果有人可以帮助我，我将不胜感激。谢谢！

div {
  width:200px;
  height:80px;
  margin:0 auto;
  color:#fff;
  font-size:2em;
  
   transform:skewX(0) skewY(200deg);
  -webkit-transform: skewX(0) skewY(200deg);

  overflow: hidden;
}

span {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(0, -200deg);
  -webkit-transform: translate(-50%, -50%) skewX(0) skewY(-200deg);

}

.bg {
  width:200px;
  height:160px;
  background-image: url(https://picsum.photos/458/354?random);
  background-size: cover;
  background-position: center center;
  &-2 {
      background-image: url(https://picsum.photos/458/354?random&time=1518166464706);
  }
  &-3 {
     background-image: url(https://picsum.photos/458/354?random&time=1518166454899);
  }
   &-4 {
      background-image: url(https://picsum.photos/458/354?random&time=1518166474771);
  }
}

<div>
  <span class="bg"></span>
  <span>01</span></div>
<div >
  <span class="bg bg-2"></span>
  <span>O2</span>
</div>
<div>
  <span class="bg bg-3"></span>
  <span>03</span>
</div>
<div >
      <span class="bg bg-4"></span>

  <span>04</span>
 </div>

Answer 1

尝试添加以下

div.skew
{
   transform: skewX(20deg) skewY(35deg); /* W3C */
   -webkit-transform: skewX(20deg) skewY(35deg); /* Safari & Chrome */
   -moz-transform: skewX(20deg) skewY(35deg); /* Firefox */
   -ms-transform: skewX(20deg) skewY(35deg); /* Internet Explorer */
   -o-transform: skewX(20deg) skewY(35deg); /* Opera */
}

Answer 2

我找到了答案。

我添加了

  position:relative;

在<div>

内

例如： https://codepen.io/alfrex92/pen/QmyVQb

在Safari中歪斜不工作

2 个答案: