<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='wrap'>
<div class='grid slide'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
</div>
body {
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
--height: 20px;
--color1: #fff;
--color2:#fff;
--delay:0s;
-webkit-perspective: 2000px;
perspective: 2000px;
}
body * {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body *:before, body *:after {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body .wrap {
width: 600px;
min-width: 600px;
height: 600px;
position: relative;
-webkit-transform: translateY(75px) translateX(-25px) rotateX(75deg);
transform: translateY(75px) translateX(-25px) rotateX(75deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body .wrap .grid {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: grid;
grid-template-columns: repeat(8, 10%);
grid-template-rows: repeat(8, 10%);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
box-shadow: 0 0 0 100vw #fff, inset 0 0 0 100vw #fff;
}
body .wrap .grid:before {
content: '';
position: absolute;
width: 100vw;
height: 50vw;
background: #fff;
top: 100%;
right: 0;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: rotateX(90.005deg);
transform: rotateX(90.005deg);
display: none;
}
body .wrap .grid.slide .cell {
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
transition-delay: 0s;
background: #fff;
box-shadow: inset 0 0 0 1px #fff;
}
body .wrap .grid .cell {
box-shadow: inherit;
-webkit-transform: scale(0.75) translateY(calc(-100% - var(--shift))) translateX(calc(-100% + var(--shift))) translateZ(var(--height));
transform: scale(0.75) translateY(calc(-100% - var(--shift))) translateX(calc(-100% + var(--shift))) translateZ(var(--height));
background: #f1f1f1;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
transition: 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
grid-row-end: span var(--size);
grid-column-end: span var(--size);
will-change: transform;
min-height: 75px;
}
body .wrap .grid .cell:nth-of-type(1) {
transition-delay: 0.0166666667s;
}
body .wrap .grid .cell:nth-of-type(2) {
transition-delay: 0.0333333333s;
}
body .wrap .grid .cell:nth-of-type(3) {
transition-delay: 0.05s;
}
body .wrap .grid .cell:nth-of-type(4) {
transition-delay: 0.0666666667s;
}
body .wrap .grid .cell:nth-of-type(5) {
transition-delay: 0.0833333333s;
}
body .wrap .grid .cell:nth-of-type(6) {
transition-delay: 0.1s;
}
body .wrap .grid .cell:nth-of-type(7) {
transition-delay: 0.1166666667s;
}
body .wrap .grid .cell:nth-of-type(8) {
transition-delay: 0.1333333333s;
}
body .wrap .grid .cell:nth-of-type(9) {
transition-delay: 0.15s;
}
body .wrap .grid .cell:nth-of-type(10) {
transition-delay: 0.1666666667s;
}
body .wrap .grid .cell:nth-of-type(11) {
transition-delay: 0.1833333333s;
}
body .wrap .grid .cell:nth-of-type(12) {
transition-delay: 0.2s;
}
body .wrap .grid .cell:nth-of-type(13) {
transition-delay: 0.2166666667s;
}
body .wrap .grid .cell:nth-of-type(14) {
transition-delay: 0.2333333333s;
}
body .wrap .grid .cell:nth-of-type(15) {
transition-delay: 0.25s;
}
body .wrap .grid .cell:nth-of-type(16) {
transition-delay: 0.2666666667s;
}
body .wrap .grid .cell:nth-of-type(17) {
transition-delay: 0.2833333333s;
}
body .wrap .grid .cell:nth-of-type(18) {
transition-delay: 0.3s;
}
body .wrap .grid .cell:nth-of-type(19) {
transition-delay: 0.3166666667s;
}
body .wrap .grid .cell:nth-of-type(20) {
transition-delay: 0.3333333333s;
}
body .wrap .grid .cell:nth-of-type(21) {
transition-delay: 0.35s;
}
body .wrap .grid .cell:nth-of-type(22) {
transition-delay: 0.3666666667s;
}
body .wrap .grid .cell:nth-of-type(23) {
transition-delay: 0.3833333333s;
}
body .wrap .grid .cell:nth-of-type(24) {
transition-delay: 0.4s;
}
body .wrap .grid .cell:nth-of-type(25) {
transition-delay: 0.4166666667s;
}
body .wrap .grid .cell:nth-of-type(26) {
transition-delay: 0.4333333333s;
}
body .wrap .grid .cell:nth-of-type(27) {
transition-delay: 0.45s;
}
body .wrap .grid .cell:nth-of-type(28) {
transition-delay: 0.4666666667s;
}
body .wrap .grid .cell:nth-of-type(29) {
transition-delay: 0.4833333333s;
}
body .wrap .grid .cell:nth-of-type(30) {
transition-delay: 0.5s;
}
body .wrap .grid .cell:nth-of-type(31) {
transition-delay: 0.5166666667s;
}
body .wrap .grid .cell:nth-of-type(32) {
transition-delay: 0.5333333333s;
}
body .wrap .grid .cell:nth-of-type(33) {
transition-delay: 0.55s;
}
body .wrap .grid .cell:nth-of-type(34) {
transition-delay: 0.5666666667s;
}
body .wrap .grid .cell:nth-of-type(35) {
transition-delay: 0.5833333333s;
}
body .wrap .grid .cell:nth-of-type(36) {
transition-delay: 0.6s;
}
body .wrap .grid .cell:nth-of-type(37) {
transition-delay: 0.6166666667s;
}
body .wrap .grid .cell:nth-of-type(38) {
transition-delay: 0.6333333333s;
}
body .wrap .grid .cell:nth-of-type(39) {
transition-delay: 0.65s;
}
body .wrap .grid .cell:nth-of-type(40) {
transition-delay: 0.6666666667s;
}
body .wrap .grid .cell:nth-of-type(41) {
transition-delay: 0.6833333333s;
}
body .wrap .grid .cell:nth-of-type(42) {
transition-delay: 0.7s;
}
body .wrap .grid .cell:nth-of-type(43) {
transition-delay: 0.7166666667s;
}
body .wrap .grid .cell:nth-of-type(44) {
transition-delay: 0.7333333333s;
}
body .wrap .grid .cell:nth-of-type(45) {
transition-delay: 0.75s;
}
body .wrap .grid .cell:nth-of-type(46) {
transition-delay: 0.7666666667s;
}
body .wrap .grid .cell:nth-of-type(47) {
transition-delay: 0.7833333333s;
}
body .wrap .grid .cell:nth-of-type(48) {
transition-delay: 0.8s;
}
body .wrap .grid .cell:nth-of-type(49) {
transition-delay: 0.8166666667s;
}
body .wrap .grid .cell:nth-of-type(50) {
transition-delay: 0.8333333333s;
}
body .wrap .grid .cell:nth-of-type(51) {
transition-delay: 0.85s;
}
body .wrap .grid .cell:nth-of-type(52) {
transition-delay: 0.8666666667s;
}
body .wrap .grid .cell:nth-of-type(53) {
transition-delay: 0.8833333333s;
}
body .wrap .grid .cell:nth-of-type(54) {
transition-delay: 0.9s;
}
body .wrap .grid .cell:nth-of-type(55) {
transition-delay: 0.9166666667s;
}
body .wrap .grid .cell:nth-of-type(56) {
transition-delay: 0.9333333333s;
}
body .wrap .grid .cell:nth-of-type(57) {
transition-delay: 0.95s;
}
body .wrap .grid .cell:nth-of-type(58) {
transition-delay: 0.9666666667s;
}
body .wrap .grid .cell:nth-of-type(59) {
transition-delay: 0.9833333333s;
}
body .wrap .grid .cell:nth-of-type(60) {
transition-delay: 1s;
}
body .wrap .grid .cell:nth-of-type(61) {
transition-delay: 1.0166666667s;
}
body .wrap .grid .cell:nth-of-type(62) {
transition-delay: 1.0333333333s;
}
body .wrap .grid .cell:nth-of-type(63) {
transition-delay: 1.05s;
}
body .wrap .grid .cell:nth-of-type(64) {
transition-delay: 1.0666666667s;
}
body .wrap .grid .cell.class11 {
-webkit-transform: scale(0.75) translateY(calc(-100% - var(--shift))) translateX(calc(-100% + var(--shift))) translateZ(calc(var(--height) * 2));
transform: scale(0.75) translateY(calc(-100% - var(--shift))) translateX(calc(-100% + var(--shift))) translateZ(calc(var(--height) * 2));
}
body .wrap .grid .cell.class11:before {
height: calc(var(--height) * 2);
}
body .wrap .grid .cell.class11:after {
width: calc(var(--height) * 2);
left: calc(var(--height) * -2);
}
body .wrap .grid .cell.class1:before, body .wrap .grid .cell.class4:before, body .wrap .grid .cell.class8:before {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
background: repeating-linear-gradient(to bottom, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #efefef 15px, #efefef 20px), repeating-linear-gradient(to right, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #efefef 15px, #efefef 20px), #ccc;
background-position: 50% 10px;
}
body .wrap .grid .cell.class1:after, body .wrap .grid .cell.class4:after, body .wrap .grid .cell.class8:after {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
background: repeating-linear-gradient(to bottom, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), repeating-linear-gradient(to left, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), #cecece;
background-position: 20px 50%;
}
body .wrap .grid .cell.class2:before, body .wrap .grid .cell.class5:before, body .wrap .grid .cell.class7:before {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
background: repeating-linear-gradient(to bottom, #efefef, #efefef 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 4px, #efefef 4px, #efefef 6px), #ccc;
}
body .wrap .grid .cell.class2:after, body .wrap .grid .cell.class5:after, body .wrap .grid .cell.class7:after {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
background: repeating-linear-gradient(to right, #fff, #fff 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 4px, #fff 4px, #fff 6px), #cecece;
}
body .wrap .grid .cell.class9:before, body .wrap .grid .cell.class6:before {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
background: repeating-linear-gradient(to right, #efefef, #efefef 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 8px, #efefef 8px, #efefef 10px), #ccc;
}
body .wrap .grid .cell.class9:after, body .wrap .grid .cell.class6:after {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
background: repeating-linear-gradient(to bottom, #fff, #fff 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 8px, #fff 8px, #fff 10px), #cecece;
}
body .wrap .grid .cell.class10:after {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
background: radial-gradient(circle at left, #ccc, #ccc 10px, rgba(255, 255, 255, 0.0001) 10px), linear-gradient(to bottom, #fff calc(50% - 10px), #ccc calc(50% - 10px), #ccc calc(50% + 10px), #fff calc(50% + 10px)), #fff;
background-position: 15px 50%, 0% 0%, 50%;
background-size: 100% 100%, 15px 100%, 100%;
background-repeat: no-repeat;
}
body .wrap .grid .cell.class3:before {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
background: repeating-linear-gradient(to bottom, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 20px, #efefef 20px, #efefef 30px), repeating-linear-gradient(to right, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #efefef 15px, #efefef 20px), #ccc;
background-position: 50% 10px;
}
body .wrap .grid .cell.class3:after {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
background: repeating-linear-gradient(to bottom, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), repeating-linear-gradient(to left, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), #cecece;
background-position: 20px 50%;
}
body .wrap .grid .cell:before {
content: '';
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: var(--height);
background: #efefef;
box-shadow: inherit;
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body .wrap .grid .cell:after {
content: '';
position: absolute;
bottom: 00%;
left: calc(var(--height) * -1);
height: 100%;
width: var(--height);
background: #fff;
box-shadow: inherit;
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
function draw() {
var cellClass = Array.from({length: 20}, (x,i) => "class" + i);
$(".wrap .grid").addClass("slide");
setTimeout(function(){
$(".grid .cell").removeClass(cellClass);
$(".wrap .grid").removeClass("slide");
$(".grid .cell").each(function() {
$(this).addClass("class" + Math.floor(Math.random() * 11 + 1));
});
$(".grid .cell").each(function() {
$(this)
.get(0)
.style.setProperty("--size", Math.floor(Math.random() * 2 + 1));
$(this)
.get(0)
.style.setProperty("--height", (Math.floor(Math.random() * 50) * 5) + "px");
$(this)
.get(0)
.style.setProperty("--angle", (Math.floor(Math.random() * 4) * 90) + "deg");
$(this)
.get(0)
.style.setProperty("--shift", ((Math.floor(Math.random() * 150) - 50) * 2.5) + "px");
});
}, 1600);
}
$(function() {
draw();
$("body").on("click", function() {
draw();
});
});
setInterval(draw,6000);
