<div class="isometriccontainer">
        <div class="isometric isometric-col-1">
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
        </div>
        <div class="isometric isometric-col-2">
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
        </div>
        <div class="isometric isometric-col-3">
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
        </div>
        <div class="isometric isometric-col-4">
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
            <div class="isometric-item"></div>
        </div>
    </div>
body {
  background-color: #00b3b3;
}
.isometriccontainer {
    opacity: 1;
    position: absolute;
    left: 10%;
    top: 5%;
    display: block;
    width: 1050px;
    margin-right: auto;
    margin-left: auto;
    transform-style: preserve-3d;
    transition: opacity 2000ms cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 2000ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}

.isometric, .isometric-item {
    transform-style: preserve-3d;
}
.isometric {
    float: left;
    transition: transform 2000ms linear 0s;
}
.isometric-col-1 {
    transform: translateX(0px) translateY(-17.5%) translateZ(0px);
}
.isometric-col-2 {
    transform: translateX(0px) translateY(-35%) translateZ(0px);
}
.isometric-col-3 {
    transform: translateX(0px) translateY(-17.5%) translateZ(0px);
}
.isometric-item {
    width: 120px;
    height: 120px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #2974c2;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: -5px 7px 0 0 #ffffff1a;
    transition: box-shadow 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}
.isometric-item:hover {
    box-shadow: 0px 0px 0 0 #ffffff1a;
    transform: rotateX(-90deg) translate3d(0px, -50px, 10px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.