Question

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

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

我尝试了一些背面可见性的东西，它不会消失但是我可以用jQuery监听器点击它然后将它翻转到前面。

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

。装备卡{ 身高：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/

的更新

Answer 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/

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

2 个答案: