<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, transform 200ms ease-in-out;
transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
}
.isometric-item:hover {
box-shadow: 0px 0px 0 0 #ffffff1a;
transform: rotateX(-90deg) translate3d(0px, -50px, 10px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.