CSS3 transform + transition experiment

dabblet.css

/**
 * CSS3 transform + transition experiment
 */
@import url("http://fonts.googleapis.com/css?family=Indie+Flower");
#e{
	margin-top:40px;
}
#e>div{
	display:inline-block;
	width:300px;
	height:200px;
	padding:15px 25px;
	margin:5px;
	position:relative;
	line-height:20px;
	background:#eee;
	font-family:"Indie Flower",sans-serif;
	font-size:25px;
	vertical-align:top;
	cursor:pointer;
}
#e>div>span,
#e>div:before
{
	display:block;
	width:50px;
	height:30px;
	position:absolute;
	z-index:1;
	top:0   ;
	left:0  ;
	right:0 ;
	bottom:0;
	margin:auto;
	text-align:center;
	line-height:25px;
	text-shadow:
		0 0 10px black,
		0 0 3px black,
		0 0 1px black;
	background:#888;
	color:white;
	border:1px solid black;
	box-sizing:border-box;
	border-bottom:4px solid #900;
	box-shadow:0 0 10px 0px rgba(0,0,50,.5);
	transition:3s transform;
	transform:none;
}

#e>div:nth-child(n):active:hover>span{
	transition-duration:1.5s;
	transform:none;
}

#e>div:before{
	content:'';
	opacity:0;
	transition:opacity 2s ease; /* buggy : transition on pseudo elements only works with firefox*/
}

#e>div:not(:active):hover:before{
	opacity:.35;
}



/******************
 ** transforms : **
 ******************/

#e>div:nth-child(1):hover>span{transform:
	rotate(180deg)
	translateX(-150px)
	rotate(-180deg)

}

#e>div:nth-child(2):hover>span{transform:
	rotate(1440deg)
	translateX(150px)
	rotate(-1440deg)
}

#e>div:nth-child(3):hover>span{transform:
	scaleY(.5)
	rotate(1440deg)
	translateX(150px)
	rotate(-1440deg)
	scaleY(2);
}
#e>div:nth-child(4):active:hover>span,
#e>div:nth-child(4)>span{transform:
	translateY(0px)
	translateY(-30px)
	rotate(0deg)
	rotate(-90deg)
	translateX(-30px)
	rotate(90deg)
	rotate(0deg)
}
#e>div:nth-child(4):hover>span{transform:	
	translateY(100px)
	translateY(-30px)
	rotate(3600deg)
	rotate(-90deg)
	translateX(-30px)
	rotate(90deg)
	rotate(-3600deg)
}
#e>div:nth-child(5):active:hover>span,
#e>div:nth-child(5)>span{transform:
	perspective(200px)
	translateY(0px)
	translateZ(30px)
	rotateY(0deg)
	rotateY(-90deg)
	translateX(-30px)
	rotateY(90deg)
	rotateY(0deg)
}
#e>div:nth-child(5):hover>span{transform:	
	perspective(200px)
	translateY(100px)
	translateZ(30px)
	rotateY(3600deg)
	rotateY(-90deg)
	translateX(-30px)
	rotateY(90deg)
	rotateY(-3600deg)
}

#e>div:nth-child(6):hover>span{transform:
	rotate(-180deg)
	translateX(-150px)
	rotate(-180deg)
}

#e>div:nth-child(7):hover>span{transform:
	rotateY(720deg)
	translateX(150px)
	rotateY(-720deg)
}

#e>div:nth-child(8):hover>span{transform:
	rotateY(1440deg)
	translate(150px,100px)
	rotateY(-1440deg)
}

#e>div:nth-child(9):hover>span{transform:
	rotateY(1440deg)
	rotateX(-360deg)
	translate(150px,100px)
	rotateX(360deg)
	rotateY(-1440deg)
}

#e>div:nth-child(10):active:hover>span,
#e>div:nth-child(10)>span{transform:
	scale(1)
	translate(0)
	scale(1)
}
#e>div:nth-child(10):hover>span{transform:
	scale(4)
	translate(37.5px) /* = 150 × 0.25 */
	scale(.25)
}

#e>div:nth-child(11):active:hover>span,
#e>div:nth-child(11)>span{transform:
	perspective(200px)
	rotateX(0deg)
	translate(0px)
	rotateY(0deg)
}
#e>div:nth-child(11):hover>span{transform:
	perspective(200px)
	rotateX(360deg)
	translate(150px)
	rotateY(-360deg)
}

#e>div:nth-child(12):active:hover>span,
#e>div:nth-child(12)>span{transform:
	perspective(300px)
	translate3d(0px,0px,0px)
	rotateY(0deg)
	rotateX(0deg)
	rotateZ(0deg)
	translate3d(0px,0px,0px)
}
#e>div:nth-child(12):hover>span{transform:
	perspective(300px)
	translate3d(0px,150px,0px)
	rotateY(-180deg)
	rotateX(180deg)
	rotateZ(180deg)
	translate3d(150px,-150px,0px)
}

#e>div:nth-child(13):active:hover>span,
#e>div:nth-child(13)>span{transform:
	perspective(500px)
	rotateY(0deg)
	rotateX(0deg)
	translate3d(0px,0px,0px)
	rotateZ(0deg)
	translate3d(0px,0px,0px)
}

#e>div:nth-child(13):hover>span{transform:
	perspective(500px)
	rotateY(-540deg)
	rotateX(540deg)
	translate3d(0px,-100px,0px)
	rotateZ(540deg)
	translate3d(150px,0px,0px)
}


/***************************
 ** toogle speed button : **
 ***************************/


#fastspeed{
	display:none;
}

#fastspeed:checked~#e>div>span {
	transition-duration:0.7s;
}

#fastspeed:checked~#e>div:active>span {
	transition-duration:0.35s;
}

[for=fastspeed]{
	display:block;
	background:#eee;
	padding:5px 10px;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:3;
	color:#777;
	user-select:none;
	cursor:pointer;
	font-size:20px;
	font-family:sans-serif;
	box-shadow:0 0 5px black;
}
[for=fastspeed]>span{
	display:inline-block;
	transition:transform .5s cubic-bezier(0.5, -1, 0.5, 2.0), opacity .2s; /*don't works on safari & oerpa*/
	background:#ccc;
	padding:5px 9px;
	border-radius:10px;
	font-size:15px;
	text-transform:uppercase;
	font-weight:bold;

}


#fastspeed:not(:checked) ~ [for=fastspeed] > span:nth-child(1),
#fastspeed:checked       ~ [for=fastspeed] > span:nth-child(2)
{
	
	transform:scale(1);
}

#fastspeed:checked       ~ [for=fastspeed] > span:nth-child(1),
#fastspeed:not(:checked) ~ [for=fastspeed] > span:nth-child(2)
{
	opacity:.5;
	transform:scale(.6);
}

dabblet.html

<input type="checkbox" checked id="fastspeed">

<div id="e">
	<div><span>1</span>Arc</div>
	<div><span>2</span>Spiral</div>
	<div><span>3</span>Slim spiral</div>
	<div><span>4</span>Spring</div>
	<div><span>5</span>Spring 3D</div>
	<div><span>6</span>Handbrake skid</div>
	<div><span>7</span>Elastic</div>
	<div><span>8</span>Oscillation</div>
	<div><span>9</span>Node</div>
	<div><span>10</span>Jump</div>
	<div><span>11</span>3D rotation</div>
	<div><span>12</span>3D spiral</div>
	<div><span>13</span>Fallen leaves</div>
</div>

<label for="fastspeed">Speed : <span>slow</span> <span>fast</span></label>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}