淘先锋技术网

首页 1 2 3 4 5 6 7

应用不透明度时，Chrome会拼合Z平移元素

enter image description here

你知道chrome这样做的原因是什么吗？有补救办法吗？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>

<body style="perspective:500px">
  
  
    <div style="
            width:40px; 
            height:40px; 
            background: green; 
            padding: 30px; 
            transform: rotateY(50deg); 
            transform-style: preserve-3d">
        <div style="
                transform: translateZ(60px)">
            content
        </div>
    </div>
  
  
  
    <hr style="margin: 40px 0">
  
  
  
    <div style="
              opacity: .5;
              width:40px; 
              height:40px; 
              background: green; 
              padding: 30px; 
              transform: rotateY(50deg); 
              transform-style: preserve-3d">
        <div style="
                transform: translateZ(60px)">
            content
        </div>
    </div>
</body>

</html>

使用不等于1的不透明度会将元素放置在新的 堆叠上下文。

这导致浏览器在遵循新规范的情况下扁平化。

我们可以使用一个包装元素来设置opcaity(根据我们的需要，这个元素也可以是具有主透视图属性的元素):

<div style="perspective:500px">
    <div style="perspective:inherit;opacity:.5">
        <div style="
            width:40px;
            height:40px;
            background: green;
            padding: 30px;
            transform: rotateY(50deg);
            transform-style: preserve-3d
        ">
            <div style="transform: translateZ(60px)">
                content
            </div>
        </div>
    </div>
</div>

我认为这是按照标准应该发生的事情:

变换样式的preserve-3d值建立堆叠上下文。

下列CSS属性值要求用户代理创建一个 子代元素的扁平化表示 已应用，因此会覆盖转换样式的行为: 保留三维:

溢出:除“visible”以外的任何值

不透明度:1以外的任何值。

过滤器:除“无”以外的任何值。

w3c规范