Untitled

dabblet.css

* {margin: 0; padding: 0;box-sizing: border-box;}

body {
	margin: 20px auto;
	width: 700px;
	text-align: center;
	background: linear-gradient(-25deg, #222, royalblue)
	}

.tile {
	width: 200px;
	height: 200px;
	display: inline-block;
	box-shadow: 0 0 15px black, inset 0 0 145px black;
	transition: .3s;
	}
	
	.tile:hover {
		box-shadow: 0 0 15px black;
		}
	.tile:first-child:hover, .tile:nth-child(4):hover,
	.tile:nth-child(7):hover {
		transform: rotate(2deg) translate(3px,5px);
		}
		.tile:first-child:hover ~ .tile:nth-child(2) {
			transform: rotate(12deg) translate(15px,15px)
			}
	.tile:nth-child(2):hover, .tile:nth-child(5):hover,
	.tile:nth-child(8):hover {
		transform: rotate(3deg);
		}
	.tile:nth-child(3):hover, .tile:nth-child(6):hover,
	.tile:nth-child(9):hover {
		transform: rotate(-3deg)
		}
	
	
	
	
	
	
	
	
	
	
	
	
	
	

dabblet.html

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}