CSS
html {
height: 100%;
width: 100%;
}
body {
background: linear-gradient(to left, #3494E6 , #EC6EAD);
}
.isometric {
-webkit-transform: rotateX(60deg)
rotateY(0deg)
rotateZ(45deg)
translate(-38%, 38%)
scale3d(1, 1, 1);
transform: rotateX(60deg)
rotateY(0deg)
rotateZ(45deg)
translate(-38%, 38%)
scale3d(1, 1, 1);
}
.sheet {
width: 100px;
height: 100px;
border-radius: 2px;
background: #D273B5;
border-bottom: 2px solid #D273B5;
border-right: 2px solid #D273B5;
-webkit-animation: lift 1.5s ease-in-out alternate infinite;
animation: lift 1.5s ease-in-out alternate infinite;
overflow: hidden;
transform-origin: 50% 50%;
}
.floor {
width: auto;
height: auto;
border-radius: 2px;
background: #FEFEFE;
border-bottom: 2px solid #cbcbcb;
border-right: 2px solid #cbcbcb;
padding: 50px;
position: absolute;
left: 50%;
top: 40%;
}
@keyframes lift {
20%, from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.3);
}
80%, to {
-webkit-transform: translate(-80px, -80px);
transform: translate(-100px, -100px);
box-shadow: 100px 112px 40px rgba(0, 0, 0, 0.2),
100px 100px 40px rgba(0, 0, 0, 0.2);
}
}
