Webkit背面可见性不起作用

一尘不染

Webkit背面可见性不起作用

css

我正在构建一个简单的示例，使用该-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，上面有一个简单的文本，背面隐藏了属性，并且仍然可见。另外，此示例使用此属性，并且也停止了工作。因此，总而言之，我的问题是，是否有人对此属性有问题，或者我的代码有问题？

阅读 240

2020-05-16

共1个答案

一尘不染

当一个孩子患有糖尿病时，我对这样一个元素的孩子也有类似的问题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 */
}

2020-05-16