透视CSS3无法正常工作

Question

I am trying to develop a card flip animation in X axis direction. As of now, div now simply rotates using rotateX() method. I have tried using perspective property to the upper div, instead of working it distorts my div structure. Since, it is just a working stage, I am only targeting google chrome. Please see it on codepen .

Here is my HTML code.

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

And my CSS, div.row{ width: 150px; height: 200px; margin: 0 auto; }

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

I am trying to achieve this effect.

But with my code, I am simply gettting.

Answer 1

UPDATE: This codepen should work on firefox, too. Because of the stacking context problem, I just made .upper relative and gave it a z-index so it would be above .lower .

If you put the perspective CSS property on .wrapper it should work: codepen

Perspective creates a new stacking context so if you put it on .upper , all of your upper <div> z-index 's are no longer in the same context as the lower ones and the lower ones are on top because of the natural HTML stacking.