Chrome 应用不透明度时使 Z 轴平移的元素变平

Question

你知道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>

Answer 1

我会说这是按照标准应该发生的事情：

A value of preserve-3d for transform-style establishes a stacking context.

The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore override the behavior of transform-style: preserve-3d:

overflow: any value other than ‘visible’

opacity: any value other than 1.

filter: any value other than ‘none’.

w3c spec

Answer 2

Using opacity with a value other than 1 places the element in a new stacking context.

这使得在尊重 new specification 的浏览器下扁平化。

在包装器元素上使用 opcaity 解决了这个问题：

<div style="perspective:500px;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>

Chrome 应用不透明度时使 Z 轴平移的元素变平

Chrome flattens Z-translated elements when opacity is applied

css

google-chrome

css-transforms