#view_wrapper {
	width: 300px;
	height: 350px;
}

.block_wrapper {
	width: 45px;
	height: 45px;
	margin-right: 15px;
	margin-bottom: 15px;

	position: relative;
	float: left;
	perspective: 100px;	
}

.block_wrapper:hover .the_block {
	transform: rotateY(180deg);
}
.block_wrapper:hover .the_block.flipped {
	transform: rotateY(0deg);
}

.flipped {
	transform: rotateY(180deg);
}
.clicked {
	transform: rotateY(180deg) scale(0.5) rotateZ(90deg);
}

.the_block {
	transition: 1s;
	transform-style: preserve-3d;
	position: relative;
}

.base_block {
	width: 45px;
	height: 45px;
	position: absolute;
	backface-visibility: hidden;
	
}
.initial_block {
	background-color: #fff;
	border: solid 1px #c7c8ca;	
	transform: rotateY( 0deg );
}

.grey_block {
	transform: rotateY(180deg);
	background-color: #c7c8ca;
}

.highlight_block {
	transform: rotateY(180deg);
	background-color: #4a478a;
}

html, body {
	height: 100%;
}
body { 	font-family: Cabin, sans; padding: 0; margin: 0; }

h1, h3 {
	color: #4a478a;
	font-size: 250%;
}

h3 { font-size: 110%; color: #000; }
a { color: #4a478a; text-decoration: none; }