I'm looking to create a page design similar to the one shown in the image below:
I had an idea for rotating coordinates, but I am facing some issues. When stacking the layers in the Y-axis, the first layer covers the others and I can't figure out how to make all three 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 class="layer-container stacked-top">
<div class="layer bottom-layer dark-blue-layer"></div>
<div class="layer mid-layer light-blue-layer"></div>
<div class="layer top-layer white-layer"></div>
</div>
</body>
</html>Any suggestions on improving this approach or an easier way to achieve the desired effect?