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轉換元素展平

回答

相關問題