css - Firefox下的CSS透视错误

我在firefox（最新版本+测试过的其他版本）下的CSS“ transform”属性上遇到问题

这是应用的转换：

  -moz-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  -o-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  -ms-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  -webkit-transform: perspective(2rem) rotateX(15deg) scaleY(1);
  transform: perspective(2rem) rotateX(15deg) scaleY(1);

并且活动元素应具有

  -moz-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  -o-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  -ms-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  -webkit-transform: perspective(0rem) rotateX(15deg) scaleY(1);
  transform: perspective(0rem) rotateX(15deg) scaleY(1);

这是一个可以在chrome和Firefox下测试的JSfiddle。
在chrome和其他元素下，“活动”元素的确发生了透视变化，而在Firefox上，该元素没有被替换。

JSFiddle

我搜索了一个类似的案例，但是其他人似乎没有发生过。

最佳答案

似乎Firefox在为transform: perspective(n)规则设置零值时效果不佳。对我有用的只是从.active规则中删除透视变换：

#owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

  跳到“编辑”部分，以下情况不正确，但以后仍将其用作参考


另外，我发现独立的perspective属性确实可以在零值的情况下正常工作。如果确保将值设置为零对您很重要，那么也许就足够了：

#owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -moz-perspective: 0em;
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
  perspective: 0em;
}

编辑

事实证明，第二种情况只是“有效”，因为未正确使用它。作为参考，perspective是旨在提供3D空间以将透视图应用于所有3D转换后的子元素的属性。例如：

.owl-item {
  perspective: 2em;
}
#owl-demo .owl-item > div {
  margin: 0px 2px;
  height:100px;
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

由于divs容器的子级owl-item均已应用3D转换，因此将对每个容器应用透视图。但是，这使得从单个子对象（活动div）中删除透视图成为不可能，至少对于纯CSS而言是这样。

另一方面，transform: perspective(n)会分别影响每个子元素，因此可以通过应用活动类来删除透视图：

#owl-demo .owl-item > div {
  margin: 0px 2px;
  height:100px;
  background: #cccccc;
  -moz-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -o-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -ms-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -webkit-transform: perspective(2em) rotateX(15deg) scaleY(1);
  transform: perspective(2em) rotateX(15deg) scaleY(1);
  transition: transform .5s;
}
#owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

希望这有助于理解这两种透视方法。我知道它对我有帮助:)

关于css - Firefox下的CSS透视错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37909335/