Isometric effect

isometric-effect.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card {
transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 200ms;
border-radius: 10px;
width: 100px;
height: 100px;
position: absolute;
}
.container {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    margin: 25px 0 0 20px;
}
.container:hover .uno {
transform: rotateX(60deg) rotateZ(-45deg) translateZ(40px);
}
.uno {
    background-color: #ff0000;
    transform: rotateX(60deg) rotateZ(-45deg) translateZ(20px);
    z-index: 0;
}
.due {
    background-color: #c60000;
    transform: rotateX(60deg) rotateZ(-45deg) translateZ(10px);
    z-index: 1;
}
.tre {
    background-color: #a40101;
    transform: rotateX(60deg) rotateZ(-45deg) translateZ(0px);
    z-index: 2;
}