不透明度が

を適用した場合のクロムがZ-翻訳要素を平らにあなたは、このためのクロムの理由が何であるかを知っていますか？治療法はありますか？

<!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-変換使うのですか？ – Noni

@noni nope、ちょうどこの正確なコード。 – Birowsky

tryトランスフォーム：rotateY（50deg）; -ms-transform：rotateY（50deg）; -webkit-transform：rotateY（50deg）; – Noni

。

これは、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

フィルタ以外の値：「なし」以外の値。新しい stacking contextで1ヶ所の要素以外の値を持つopacityを使用して

w3c spec

出典

2017-06-29 16:03:58 vals

答えて

関連する問題