Question

我遇到了css＆＃34;转换＆＃34; firefox下的属性（最新版+其他版本测试）

以下是应用的转换：

  -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下测试的JSfiddle，在firefox下。＆＃34;活跃＆＃34;元素确实在chrome＆amp;其他人，在Firefox上，它没有被替换。

JSFiddle

我搜索了一个类似的案例，但它似乎并没有发生在其他人身上。

Answer 1

看起来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;
}

修改

原来第二种情况只是＆＃34;工作＆＃34;因为它没有被正确使用。作为参考，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);
}

希望这有助于理解2种视角方法。我知道它帮助了我:)。

Answer 2

抱歉没有对实际问题做出贡献，但是：考虑到您正在使用perspective来塑造导航标签，似乎这在现实世界中不起作用。（是的，我知道，skewomorphism已经出局，但仍然 - 想象你必须在纸上构建布局，就像谷歌的材料一样，你不能像它们那样弯曲标签......

Firefox下的CSS透视bug

2 个答案:

修改