3d 元素在 Firefox 中不起作用答案

【问题标题】：3d element not working in Firefox3d 元素在 Firefox 中不起作用
【发布时间】：2013-10-22 22:43:14
【问题描述】：

我正在尝试像这样旋转 2 个 div http://jsfiddle.net/4mFLL/

<!DOCTYPE html>
<html>
    <head>
        <style>
.psd {
    position: absolute;
    height: 0px;
    width: 400px;
    perspective: 700px;
    -webkit-perspective: 700px;
    -moz-transform: perspective(700px);
}

.foo {
    position: absolute;
    display: table;
    height: 50px;
    width: 100%;
    background: #F00;
    transform-style: preserve-3d;
    transform-origin: top;
    transform: rotateX(-20deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-20deg);
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: top;
    -moz-transform: rotateX(-20deg);
}
        </style>
    </head>
    <body>
        <div style="position: fixed;">
            <div class="psd">
                <div class="foo">
                    <p>Text 1</p>
                    <div class="foo">
                        <p>Text 2</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

它可以在 Chrome 中运行，但不能在 Firefox 中运行。 Firefox 不支持这些类型的旋转还是我错过了一个 css 属性？

胸

【问题讨论】：

通常这样的错误是语法错误，因为您使用的某些属性是实验性的。最好的起点是验证语法是否 100% 正确。

标签： css firefox webkit transform

【解决方案1】：

将 .foo 样式更改为：

.foo {
    display: block;
    }

【讨论】：