Figure tabbing slidshow stuff

dabblet.css

/**
 * Figure tabbing slidshow stuff
 */
* {
   box-sizing: border-box;
   transition: all 0.5s ease;
   vertical-align: middle;
 }


@import url(http://fonts.googleapis.com/css?family=Lobster);

body {
	perspective: 800px;
}
figure {
	display: block;
	float: left;
	width: 10em;
	height: 11em;
	margin: 1.5em 1em;
	padding: 1em;
	padding-bottom: 3em;
	text-align: center;
	border: 1px solid #222;
	position: relative;
	box-shadow: 0 3px 10px #ccc;
	transform:  rotateX(-40deg) rotateY(40deg) rotateZ(3deg);
	background-color: #333;
	color: #aaa;
	z-index: 1;
}

figure:focus, 
figure:hover
{
	transform: rotate(0);
	width: 20em;
	height: 21em;
	margin-left: -3em;
	margin-right: -3em;
	z-index: 10;
	outline: none;
}

figcaption {
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	height: 2em;
	font-feature-settings: "dlig=1,ss02=1,case=1";
	font-family: 'Lobster', cursive;
}

img {
	max-width:100%; max-height:100%;
}

dabblet.html

<figure tabindex="0" id="first">
    <img src="http://pcdn.500px.net/5803457/c7bd656f2a6760dfe5c372f5758ba3b855a3e0f6/4.jpg" alt="first" />
    <figcaption>first</figcaption>
</figure>


<figure tabindex="0" id="second">
    <img src="http://pcdn.500px.net/5802864/6651180a3932650dd1c1f0b3adaf88b13cbaa962/4.jpg" alt="second" />
    <figcaption>second</figcaption>
</figure>


<figure tabindex="0" id="third">
    <img src="http://pcdn.500px.net/5803067/539f5cf9858b38aa9f90e93b5c2e1c9727c76dce/4.jpg" alt="third" />
    <figcaption>third</figcaption>
</figure>

<figure tabindex="0" id="fourth">
    <img src="http://pcdn.500px.net/5594556/0731eac3c88effc8821d3dcd065076b0f04c635c/4.jpg" alt="fourth" />
    <figcaption>fourth</figcaption>
</figure>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}