CSS3 Transformations

dabblet.css

/* CSS3 Transformations */

div {
 width: 200px;
 height: 200px;
 padding-top: 85px;
 margin: 20px;
 background: RoyalBlue;
 box-sizing: border-box;
 color: white;
 font-family: Helvetica;
 font-size: 2em;
 text-align: center;
 float: left;
}

#eins { transform: rotate(6deg); }
#zwei { transform: scale(0.8); }
#drei { transform: translate(0,80px) }
#vier { transform: skew(-10deg) }

dabblet.html

<div id="eins">
BOX
</div>

<div id="zwei">
BOX
</div>

<div id="drei">
BOX
</div>

<div id="vier">
BOX
</div>

settings.json

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