CSS3卡翻转背面在转换结束时消失

我得到了一套简单的卡片，我需要在点击时翻开。问题是，当变换完成时，背面（蓝色面）消失。它会在动画中显示在前面

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

我尝试了一些背面可视性的方法，使它不会消失，但我可以用jQuery侦听器单击它，并将其翻转到前面

这是小提琴：

这是CSS:`。设备卡座{ -webkit透视图：1000； }

.设备卡{ 高度：250px； 宽度：222px； 背景：#fff； 盒影：0 1px 5px rgba（0,0,0,0.9）； 浮动：左； 利润率：0.9px 30 px

-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的浏览器来显示我正在使用的供应商前缀。

好吧，所以我解决了这个问题，是的，它很简单。问题是我在卡片上设置了背景颜色（卡片两面都设置了vs）。我希望我的回答对将来可能在谷歌上搜索这个问题的人有用

编辑：更准确的答案

css:8移除卡的背景

background: #fff;

只要把背景放在脸上就行了

---

可以检查同一把小提琴的更新

我做了类似的事情，但被接受的答案对我不起作用。因此我尝试了其他一些破解方法

发生的事情是，“back”类的背景以某种方式被“flipped”类的背景覆盖

可以通过在翻转的类上添加

background:transparent；

来更正

请注意，这不是一个完美的解决方案，只是一个变通办法

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

---

在此处查看更新的小提琴：

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