Javascript 透视图CSS3不工作

我正在尝试开发X轴方向的卡片翻转动画。到现在为止，

div

现在只是使用rotateX（）方法进行旋转。我曾尝试对上div使用perspective属性，而不是使用它，它会扭曲我的div结构。因为，这只是一个工作阶段，我只针对谷歌浏览器。 请在电视上看

这是我的HTML代码

<div class="wrapper">
                <div class="upper">
                    <div class="upper-current">
                        <div class="content">
                            1
                        </div>
                    </div>
                    <div class="upper-next">
                        <div class="content">
                            2
                        </div>
                    </div>
                </div>

                <div class="lower">
                    <div class="lower-current">
                        <div class="content">
                            1
                        </div>
                    </div>
                    <div class="lower-next">
                        <div class="content">
                            2
                        </div>
                    </div>
                </div>
            </div>

我正在努力达到这个效果。

但是用我的代码，我只是简单地得到了。

更新： 这应该也适用于firefox。由于堆叠上下文的问题，我只是将

.upper

设置为relative

，并给它一个z索引，使其位于

.lower

之上

如果将

透视图

CSS属性置于

.wrapper

上，它应该可以工作：

---

创建一个新的堆叠上下文，因此如果将其置于

.upper

，则所有的上层

z-index

不再与下层的处于同一上下文中，并且由于HTML的自然堆叠，下层的位于顶部。

使用透视图后，您面临什么问题，上边应该更贴近或用简单的话，考虑开门效果。给用户。我在使用透视图，即使这样，我也收到了一个简单的旋转效果，它似乎对我有用。可能我还不够清楚。RotateX效应正在完全发挥作用。然而，前景并非如此。旋转div的上边缘应该放大，或者看起来应该比水平卡片上的下边缘大。Flip我想我明白了。我的回答中的代码笔不适合你吗？我的chrome正在工作，我不明白。它现在正在展示前景。至少12个小时前，我在最新版本的firefox上尝试了同样的方法，但没有成功。另一方面，我刚刚查看了另一个js.Hmmm，看起来Firefox和WebKit在透视图的工作方式上存在分歧。请参阅此堆栈溢出q:。

        div.wrapper{
            background-color: #444;
            width: 150px;
            height: 200px;
            border-radius: 5px;
            position:relative;

        }

        div.wrapper div.upper, div.wrapper div.lower{
            height: 100px;
            width:100%;

        }

        div.upper-current{
            transition :all 1s;
            transform-origin: 50% 100%;
        }

        div.wrapper > div.upper > div, div.wrapper > div.lower > div{
            height: 100px;
            width:100%;
            position:absolute;
            top:0;
            overflow:hidden;
            text-align:center;
            background-color:#444;
        }

        div.wrapper > div.upper > div{
            border-bottom: 3px solid #333;
        }

        div.wrapper > div.lower > div{
            height: 200px;
        }

        div.upper-current{
            z-index: 4;
        }

        div.upper-next{
            z-index: 3;
        }

        div.lower-current{
            z-index: 2;
        }

        div.lower-next{
            z-index: 1;
        }

        div.content{
            position: relative;
            top: -24px;
        }