CSS3 Transitions

dabblet.css

/* CSS3 Transitions */

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;
 font-smoothing: antialiased;
 transition: all linear .4s; /* transition */
}

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

#eins:hover { transform: rotate(0deg); }
#zwei:hover { transform: scale(1); }
#drei:hover { transform: translate(0,0); }
#vier:hover { transform: skew(0deg); }

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"}