Loading dot dot dot

dabblet.css

/*
   Loading dot dot dot
*/

body {
  padding: 100px;
  font-size: 62.5%;
  width: 400px;
}

.skew-wrap {
	perspective: 400px;
}

.skew {
	width: 400px;
	height: 400px;
	background: #ff0077;

	-webkit-transform: rotateX(25deg);
	-moz-transform: rotateX(25deg);
	-o-transform: rotateX(25deg);
	-ms-transform: rotateX(25deg);
	transform: rotateX(25deg);

	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
}

.skew:hover {
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
}

dabblet.html

<div class="skew-wrap">
   <div class="skew">LOTS OF REALLY COOL STUFF</div>
</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}