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

Question

我已经得到了一组简单的卡片,我需要点击它.问题是当变换完成后,背面(蓝色侧)消失.它会在动画中显示回到正面.

我知道这可能是一个简单的解决方案而且很简单,但可能不是.我可以在Chrome(Canary)和Safari中复制结果.

我已经尝试了一些背面可见性的东西,它可以让它不会消失但是我可以用jQuery监听器点击它并将它翻转回前面.

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

这是CSS:`.equipment-card-holder {-webkit-perspective:1000; }

.equipment-card {身高:250px; 宽度:222px; 背景:#fff; box-shadow: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的浏览器,用于我正在使用的供应商前缀.

Answer 1

好的,我找出了问题,是的,这很简单.问题是我在卡片上设置了背景颜色(与卡片的两面相比).我希望这个答案对我将来可能正在使用谷歌搜索这个问题的人有用.

编辑:更准确的答案

css:8删除卡的背景

background: #fff;

只是把背景放在脸上

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