CSS firefox 下的透视错误

Question

我在使用 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。 "active" 元素在 chrome 及其他版本下确实发生了透视变化，而在 firefox 上，它没有被替换。

JSFiddle

我搜索过类似的案例，但其他人似乎没有遇到过。

Answer 1

Firefox 似乎无法很好地为 transform: perspective(n) 规则设置 zero-value。对我有用的只是从 .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);
}

Jump the the Edit section, the scenario below is incorrect, but still using it as a reference later

此外，我发现独立的 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;
}

编辑

事实证明第二种情况只是 "working" 因为它没有被正确使用。作为参考，perspective 是一个属性旨在提供 3D space 以将透视应用于所有 3D 转换的 child 元素。例如：

.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);
}

因为 owl-item 容器的 child divs 都应用了 3D 变换，这将对每个容器应用一个透视图。然而，这使得从单个 child（活动的 div）移除视角是不可能的，至少对于纯 CSS.

另一方面，

transform: perspective(n) 会影响 div 中的每个 child 元素，因此可以通过应用活动 class 来移除视角：

#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);
}

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

Answer 2

很抱歉没有造成实际问题，但是：考虑到您正在使用 perspective 来塑造导航选项卡，这似乎在现实世界中行不通。（是的，我知道，倾斜同构已经过时了，但仍然 - 想象一下你必须在纸上构建布局，比如 Google 的 material-thing，你不能像现在这样弯曲标签…

CSS firefox 下的透视错误

CSS perspective bug under firefox

css

perspective

编辑