Chrome在应用不透明时将Z转换元素展平

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

来源

2017-06-29 Birowsky

你使用-webkit-变换的Safari浏览器？ – Noni

@noni nope，就是这个确切的代码。 – Birowsky

尝试转换：rotateY（50deg）; -ms-transform：rotateY（50deg）; -webkit-transform：rotateY（50deg）; – Noni

使用opacity在新 stacking context比1个的地方元素以外的值。

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

包装元素上使用opcaity解决此：

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

来源

2017-06-29 17:29:00

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

保持-3D的用于变式建立堆叠内容的值。

下面的CSS属性值所需要的用户代理可被应用之前创建后代元素的扁平表示，并且因此覆盖的变换式的行为：保存-3D：

溢出：比“可见的”

不透明度之外的任何值：大于1

滤波器以外的任何值：除“无”之外的任何值。

w3c spec

来源

2017-06-29 16:03:58 vals

Chrome在应用不透明时将Z转换元素展平

回答

相关问题