Webkit 背面可见性不起作用

发布于 2024-12-05 14:38:56 字数 2249 浏览 0 评论 0原文

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

前几天还好好的，突然就不行了。该效果仍然有效，但是当我将鼠标悬停在卡片上时，正面应该消失以使背面可见。为此，我使用 -webkit-backface-visibility: hide 属性。但似乎在 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 上有一个简单的文本，背面隐藏属性，但它仍然可见。另外，此示例使用此属性并且也停止工作。所以，总而言之，我的问题是，其他人对此属性有问题吗？还是我的代码有问题？

原文

I'm building a simple example to flip a card using the -webkit-transform: rotateY property.

It was working fine a couple of days ago, but all of a sudden it stop working. The effect still works, but when I hover over the card, the front side should disappear to make the back side visible. for this I'm using the -webkit-backface-visibility: hidden property. But it seems that is not working anymore in chrome (Both in the stable and the nightly build version)

Here is the code in case I'm doing something terrible bad

<!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>

I came to this conclusion because I made a couple of simple examples using only a rotated div with a simple text on it, the backface hidden property and it was still visible.
Also, this example uses this property and also stopped working.
So, to sum up, my question is, does anyone else have problem with this property or is there a problem with my code?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

还如梦归 2024-12-12 14:38:56

就放这个-webkit-transform:rotateY(0deg);，你需要先告诉浏览器哪个是正面。

回复收藏 0 原文

美煞众生 2024-12-12 14:38:56

当孩子有 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 */
}

I had a similar problem with children of such an element when a child had a webkit-transform.
I noted that I had to set the backface visibility on that element as well:

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

So the solution is to use as well:

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

回复收藏 0 原文

空城缀染半城烟沙 2024-12-12 14:38:56

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

回复收藏 0 原文

听不够的曲调 2024-12-12 14:38:56

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

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

If you have tested all other options here and nothing worked while this example works on your browser, then please make sure that element corresponding to #card from the example bellow has overflow:visible:

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

回复收藏 0 原文

说谎友 2024-12-12 14:38:56

我在 Windows XP 上的多个 Chrome 版本（包括 Chrome 24）中都遇到过此问题。

此方法已修复该问题：

通过以下 URL 打开 chrome 标志编辑器：
<块引用>
<块引用>
<预><代码> chrome://flags/
启用以下设置：
<块引用>
覆盖软件渲染列表
覆盖内置软件渲染列表并在不受支持的系统配置上启用 GPU 加速。
还要确保启用加速 CSS 动画。

事实上，这解决了问题，表明 Chrome 认为我的系统是“不受支持的系统”。因此，您的情况可能会有所不同，具体取决于 Chrome 对您系统的印象。

I've encountered this problem in multiple versions of Chrome on Windows XP, including Chrome 24.

This fixed it:

Open chrome flag editor via this URL:
```
  chrome://flags/
```
Enable the following setting:
Override software rendering list
Overrides the built-in software rendering list and enables GPU-acceleration on unsupported system configurations.
Also make sure that accelerated CSS animations are enabled.

The fact this resolved the problem suggests Chrome considers my system an "unsupported system". As such your mileage may vary depending on Chrome's impression of your system.

回复收藏 0 原文

疯了 2024-12-12 14:38:56

我在某处读到这与主机的 GPU 功率有关。这对我来说适用于每台具有不错 GPU 的设备。证明这一点的事实是，它在 Dell Mini 上对我不起作用，即使是在安装全新操作系统 (win8) 和旧 XP 机器上也是如此。问题是，背面可见性存在，但没有被调用，这意味着我无法使用 javascript 来检测它。

检查 http://amproducts.org

回复收藏 0 原文