<div class="box"></box>

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: radial-gradient(closest-side, rgba(255, 255, 255, .94), rgba(255, 255, 255, .94), rgba(255, 255, 255, 1)), url('https://s.electerious.com/images/codepen/grid.svg');
	background-repeat: no-repeat, repeat;
	background-size: auto, 75px 44px;
}

@keyframes transform {
	0% {
		transform: translate(-10px, -10px);
	}
	100% {
		transform: translate(-100px, -100px);
	}
}

@keyframes opacity {
	0% {
		opacity: .4;
		filter: blur(10px);
	}
	100% {
		opacity: .2;
		filter: blur(20px);
	}
}

.box {
	width: 140px;
	height: 140px;
	transform: rotateX(55deg) rotateZ(45deg);

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&::before {
		background: black;
		animation: opacity 4s ease;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	&::after {
		background: #2d84fc;
		animation: transform 4s ease;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		box-shadow:
			1px 1px 0 darken(#2d84fc, 4%),
			2px 2px 0 darken(#2d84fc, 4%),
			3px 3px 0 darken(#2d84fc, 4%),
			4px 4px 0 darken(#2d84fc, 4%),
			5px 5px 0 darken(#2d84fc, 4%);
	}
}