2

类似于其他一些翻转卡片的示例： 类似示例 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);
        }

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

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

4

1 回答 1

0

好的，所以我看了一下它并进行了一些调整，正如您在 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;
    }

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

于 2013-07-18T15:32:14.783 回答