Search code examples
cssgoogle-chromecss-transforms

Chrome flattens Z-translated elements when opacity is applied

enter image description here

Do you know what is chrome's reason for this? Is there a remedy? 

<!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>

Solution

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

    This causes the flattening under browsers which are respecting the new specification.

    We can use a wrapper element to set the opcaity (this element can be the one with the main perspective property as well depending on what we need):

    <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>