perpendicular-layer-sorting.html | Explore in Territory

<!DOCTYPE>
<html>
<head>
<title>Perpendicular layer sorting</title>

<style type="text/css" media="screen">
    #container {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 50px 100px;
        -webkit-perspective: 500;
    }
 
    #parent {
        margin: 10px;
        width: 280px;
        height: 280px;
        background-color: purple;
        -webkit-transform-style: preserve-3d;
        transform: rotateY(20deg);
    }

    #parent > div {
        position: absolute;
        top: 40px;
        left: 40px;
        width: 200px;
        height: 400px;
        padding: 10px;
        background-color: green;
        transform: translateY(50px) translateZ(10px) rotateX(90deg);
    }
</style>
</head>
<body>
<!-- The green layer should not overlap the purple layer -->
<div id="container"> 
    <div id="parent"> 
        <div></div> 
    </div> 
</div> 

</body>
</html>

chromium/third_party/blink/web_tests/compositing/perpendicular-layer-sorting.html