CSS3 Card Flip 背面在变换结束时消失答案

【问题标题】：CSS3 Card Flip backface disappears at end of transformCSS3 Card Flip 背面在变换结束时消失
【发布时间】：2013-04-01 07:29:29
【问题描述】：

我得到了一组简单的卡片，我需要在点击时翻转它们。问题是当变换完成后背面（蓝色面）消失了。它会在动画回到正面时出现。

我知道这可能是一个简单的解决方案和一些简单的东西，但它可能不是。我可以在 Chrome (Canary) 和 Safari 中复制结果。

我已经尝试了一些具有背面可见性的方法，使其不会消失，但是我可以使用 jQuery 侦听器单击它并将其翻转回前面。

这里是小提琴：http://jsfiddle.net/9gPfz/1/

这是 CSS：`.equipment-card-holder{ -webkit-透视：1000； }

.设备卡{ 高度：250px；宽度：222px；背景：#fff; 盒子阴影：0 1px 5px rgba(0,0,0,0.9); 向左飘浮; 边距：0 9px 30px；

-webkit-transform-style: preserve-3d;


-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; 
}

.equipment-card .card-face{
    -webkit-backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    }

.equipment-card .card-front{
    -webkit-transform: rotateY(0deg);
    }

.equipment-card .card-back{
    -webkit-transform: rotateY(180deg);
    background-color: lightBlue;
    }

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);

    }

.span12{

width: 960px;
}
}`

对于我正在使用的供应商前缀，您需要一个基于 webkit 的浏览器。

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

好的，所以我发现了问题，是的，这很简单。问题是我在卡片上设置了背景颜色（相对于卡片的两面）。我希望这个答案对将来可能在谷歌上搜索这个问题的人有用。

编辑：更准确的答案

css:8 去除卡片背景

background: #fff;

只需将背景放在脸上

可以查看同一个小提琴http://jsfiddle.net/9gPfz/2/的更新

【讨论】：

谢谢。有点反直觉，但它是有道理的。
我已经尝试了很多方法来解决这个问题，而你的回答就是诀窍！非常感谢！！
非常感谢！
Doh.. 我怎么没试过这个。非常感谢。

【解决方案2】：

我正在做类似的事情，但接受的答案对我不起作用。所以我尝试了其他一些技巧。

发生的事情是“后退”类的背景不知何故被“翻转”类的背景覆盖了。

可以通过在翻转类上添加background: transparent; 来纠正它。

请注意，这不是一个完美的解决方案。只是一种解决方法。

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    background: transparent;
}

在此处查看更新的小提琴：http://jsfiddle.net/9gPfz/28/

【讨论】：