Issue
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 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>
How can it be improved and is there another simplier way to implement this?
Solution
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 class="layer-container"></div>
Answered By - Bqardi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.