What are the ways to make layered block in css-CodePudding

I need to make the following page design

I came up with the following coordinates rotation idea, but it's not working for now: I tried to stack it in Y-axis but the first one overlayes others and I don't know how to make others two visible.

body {
    margin: 0;
    background: #b4e0e1;
}

.layer-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -250px;
    perspective: 500px;
   transform-style: preserve-3d;
}

.layer {
    width: 500px;
    height: 250px;
    position: absolute;
    transition: all 1.5s ease-in-out;
    cursor: pointer;
    z-index: 1;
}


/* dark blue layer */

.dark-blue-layer {
    background: #234688;
}


/* light blue layer */

.light-blue-layer {
    background: #2abfd5;
}

.white-layer {
    background: #fff;
}

.bottom-layer {
    transform: rotateX(0deg) rotateY(-25deg) translateX(0px);
}

.mid-layer {
    transform: rotateX(0deg) rotateY(-25deg) translateX(20px);
}

.top-layer {
    transform: rotateX(0deg) rotateY(-25deg) translateX(40px);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
<div >
        <div ></div>
        <div ></div>
        <div ></div>
</div>
  </body>
</html>

How can it be improved and is there another simplier way to implement this?

CodePudding user response：

I'm confused by your transform settings and what you are trying to achieve, but to get the look from the green image you can use box-shadow to simulate "background layers":

body {
    margin: 0;
    background: #b4e0e1;
}

.layer-container {
    width: 260px;
    height: 140px;
    background-color: #fff;
    margin: 20px auto;
    box-shadow: 5px 5px 0 0 #234688, 10px 10px 0 0 #2abfd5;
}

<div ></div>