透视 CSS3 无效

Question

我想开发一个X轴方向的卡片翻转动画。截至目前，div 现在只需使用 rotateX() 方法进行旋转。我已经尝试使用透视属性到上部 div，而不是工作它扭曲了我的 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{ 宽度：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

更新： codepen 应该也适用于 firefox。由于堆栈上下文问题，我只是做了 .upper relative 并给它一个 z-index 所以它会在 .lower.

以上

如果你把 perspective CSS 属性放在 .wrapper 上，它应该可以工作：codepen

Perspective 创建一个新的堆叠上下文，所以如果你把它放在 .upper 上，你所有的上 <div> z-index 都不再在同一个上下文中由于自然 HTML 堆叠，较低的和较低的在顶部。

透视 CSS3 无效

Perspective CSS3 Not Working

html

javascript

css

angularjs