css – Webkit背面可见性不工作

我正在构建一个简单的例子来翻转一个卡使用-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使用此属性，也停止工作。
所以，总而言之，我的问题是，有没有其他人有这个属性的问题，或者我的代码有问题吗？

解决方法

我有一个类似的问题儿童的这样一个元素，当一个孩子有一个webkit变换。
我注意到，我必须设置该元素的背面可见性：

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

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

所以解决方案是使用：

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

css – Webkit背面可见性不工作

解决方法

相关推荐