CSS 透视图在 Firefox 中不像在其他浏览器中那样起作用答案

【问题标题】：CSS perspective doesn't act in Firefox as in other browsersCSS 透视图在 Firefox 中不像在其他浏览器中那样起作用
【发布时间】：2014-04-21 15:27:44
【问题描述】：

基本上，标题说明了一切。我有这个代码：

<html>
  <head>
    <style>
      body
        {
        -webkit-perspective: 500px;
        perspective: 500px;
        }
      #mydiv
        {
        transform:rotateY(45deg);
        -webkit-transform:rotateY(45deg);
        -o-transform:rotateY(45deg);
        position:absolute;
        left: 50%;
        top: 50%;
        width:720px;
        height:360px;
        margin:-180px 0px 0px -360px;
        background-color:#000000;
        color:#FFFFFF;
        }
    </style>
  </head>
  <body>
    <div id="mydiv">
      this is my div.
    </div>
  </body>
</html>

现在这在 Chrome 和 IE 中运行良好。我在 Firefox 中遇到了这个问题。 div 被旋转，但不像在 Chrome 和 IE 中那样。有谁知道这个问题的原因，以及如何解决这个问题？添加-moz-perspective 也不起作用。

【问题讨论】：

我在 FF31 和 Chromium 36 上看到了同样的效果。Fiddle
小提琴在 FF28 上看起来很不一样。我尝试弄乱透视原点以使顶部边缘与结果窗口齐平，但无济于事。

标签： css firefox perspective webkit-perspective

【解决方案1】：

Firefox 似乎以不同于其他浏览器的方式呈现top: 50% 行。旋转的处理方式相同，但由于顶线在 FF 中可见，因此看起来像是不同的变换。从 my fork of Oriol's fiddle 中的 CSS 中删除 top:50% 会导致在 FF28、IE11 和 Chrome 34 上出现相同的外观。

【讨论】：

我想我不清楚目标。删除 top:50% 使您的示例在 3 种最常用的浏览器上看起来相同。你能提供一个应该发生的事情的屏幕截图吗？