CSS3 灵活/响应式翻转卡在变换结束时失去背面

Question

类似于其他一些翻转卡片的例子： similar example 1

但是，答案通常是确保包含的卡片上没有背景，并在卡片的正面和背面指定。但是，这不适用于我的示例，因为带有文字的背面不会与正面图片占据相同的高度。

我偶尔让它正常工作，但是在刷新页面后，它又回到了损坏状态。

My Code

.flipper{
            //transform: perspective(1000px);
            transform-style: preserve-3d;
            position: relative;
            width: 100%;
            min-height: 345px;
            transition: 0.6s;
            background-color: rgb(242,245,245);
            box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);
        }

我还没有开始对此进行任何跨浏览器测试，但是我在看什么样的可用（非动画）支持？

我知道这与其他问题非常相似，但是这种情况应该有很大不同，因为它没有在卡片上声明固定高度，并且可能需要在卡片本身上应用背景而不是面孔

Answer 1

好的，所以我看了一下并做了一些调整，正如您在 jsFiddle 上看到的那样。

http://jsfiddle.net/nsUZB/1/

主要是我去除了脚蹼上的背景色和最小高度，并在正面和背面设置了浅蓝色。

.flipper{
            //transform: perspective(1000px);
            transform-style: preserve-3d;
            position: relative;
            width: 100%;
            //min-height: 345px;
            transition: 0.6s;
            //background-color: rgb(242,245,245);
            box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);
        }


        .front, .back{
        backface-visibility: hidden;
        //transition: 0.6s;
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: lightBlue;
    }

让我知道这是否朝着正确的方向发展。