Question

我正在构建一个使用-webkit-transform: rotateY属性翻转卡片的简单示例。

几天前工作正常，但突然间它停止工作了。效果仍然有效，但当我将鼠标悬停在卡片上时，正面会消失，使背面可见。为此，我使用-webkit-backface-visibility: hidden属性。但它似乎不再适用于chrome（稳定版和夜间版本）

这是代码，以防我做一些可怕的坏事

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Card Flip Using CSS</title>
    <style type="text/css">
        body {
            background-color: #3d994a;
        }
        h1 {
            font-size: 30pt;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            display: block;
            text-shadow: 1px -1px 0px #4E4E4E;
        }
        #container { 
            -webkit-perspective: 1000; 
        }
        .card {
            position: relative;
            width: 286px;
            height: 392px;
            -webkit-transform-style: preserve-3d;           
            -webkit-transition: all 0.5s linear;           
        }   
        #container:hover .card{
            -webkit-transform: rotateY(180deg);
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            border-radius: 20px;    
            border:1px solid #eee;
            background-color: #FFF;
            box-shadow: #000 3px 2px 4px;
        }
        .back {
            -webkit-transform:rotateY(180deg);  
        }
    </style>
</head>

<body>
    <h1>Hover over the card to flip it</h1>
    <div id="container">
        <div class="card">
            <div class="front face">            
                <img src="images/back.png" alt="" />
            </div>
            <div class="back face">
                <img src="images/front.png" alt="" />
            </div>      
        </div>
    </div>
</body>
</html>

我得出了这个结论，因为我做了几个简单的例子，只使用了带有简单文本的旋转div，背面隐藏属性，它仍然可见。此外，this example使用此属性并停止工作。总而言之，我的问题是，是否有其他人对此属性有疑问或我的代码有问题？

Answer 1

只需输入此-webkit-transform:rotateY(0deg);，您需要先告诉浏览器哪个是正面。

Answer 2

当孩子有webkit-transform时，我和这样一个元素的孩子有类似的问题。我注意到我必须在该元素上设置背面可见性：

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

因此解决方案也是如此：

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}

Answer 3

如果您已经在此处测试了所有其他选项，并且this example在您的浏览器上运行时没有任何效果，那么请确保下面示例中与#card对应的元素具有overflow:visible：< / p>

<div id="container">
    <div class="card">
        <div class="front face"></div>
        <div class="back face"></div>      
    </div>
</div>

Answer 4

有趣的是，如果将不透明度设置为1以外的任何值（例如.99），突然背面可见性将生效。

Answer 5

我在Windows XP的多个版本的Chrome中遇到此问题，包括Chrome 24.

这解决了它：

通过此URL打开chrome flag编辑器：
```
  chrome://flags/
```
启用以下设置：

覆盖软件呈现列表 覆盖内置软件渲染列表，并在不支持的系统配置上启用GPU加速。
还要确保启用加速CSS动画。

这解决了这个问题，这表明Chrome认为我的系统是“不受支持的系统”。因此，根据Chrome对您系统的印象，您的里程可能会有所不同。

Answer 6

似乎它在Mac上不太稳定，我在动画片工作的页面上留下了几个小时的铬片，当我回到后面时，只能停止工作。 Chrome重启有助于解决问题。

Answer 7

我在某处读到这与主机pc的GPU电源有关。这适用于每个拥有不错GPU的设备。这方面的证据是，即使在安装了新操作系统（win8）和旧的XP机器之后，它也无法在戴尔Mini上运行。问题是，背面可见性存在，但没有被调用，这意味着我无法使用javascript来检测这一点。

检查http://amproductions.org

Webkit背面可见性无法正常工作

7 个答案: