7

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

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

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

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

这是 CSS：`.equipment-card-holder{ -webkit-perspective: 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 的浏览器。

4

3 回答 3

21

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

编辑：更准确的答案

css:8 去除卡片背景

background: #fff;

只需将背景放在脸上

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

于 2013-04-09T18:37:51.347 回答
2

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

发生的事情是“后退”类的背景以某种方式被“翻转”类的背景覆盖。

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

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

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

于 2017-03-19T03:01:26.023 回答
0

现有的答案都不适合我。我在卡片正面有一个子元素，它在翻转时消失了。

<div class="front">
    <div class="mytext">
        {{data.text}}
    </div>
</div>

要修复它，我还必须将 transform 属性添加到孩子。

.front {
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
.mytext {
    transform: rotateY(0deg);
    z-index: 1;

}

于 2022-01-21T10:55:04.997 回答