透視CSS3無法正常工作

Question

我正在嘗試在X軸方向上開發卡片翻轉動畫。 截至目前， div現在僅使用rotateX（）方法進行旋轉。 我嘗試對上層div使用Perspective屬性，而不是對其進行操作會扭曲我的div結構。 因為這只是一個工作階段，所以我只針對Google chrome。 請在codepen上看到它。

這是我的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>

還有我的CSS，div.row {width：150px; 高度：200px； 保證金：0自動; }

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

我正在努力達到這種效果。

但是用我的代碼，我簡直就是傻瓜。

Answer 1

更新：此代碼筆也應在firefox上工作。 由於堆棧上下文問題，我只是將.upper relative ，並為其指定了z-index，使其位於.lower 。

如果將perspective CSS屬性放在.wrapper它應該可以工作： codepen

Perspective創建了一個新的堆棧上下文，因此，如果將其放在.upper ，由於自然的HTML，所有上面的<div> z-index不再與下面的上下文在同一上下文中，而下面的z-index在上面堆疊。