Question

与翻转卡的其他几个例子类似： similar example 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);
        }

我还没有对此进行任何跨浏览器测试，但我看到了哪种可用的（非动画）支持？

我意识到这与其他问题非常相似，但是这种情况应该在不在卡片上声明固定高度方面有所不同，并且背景可能需要应用于卡片本身而不是面部

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

如果这是朝着正确的方向发展，请告诉我。

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

1 个答案: