generic caption styles

dabblet.css

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



	body {
		width: 600px;
		margin: 20px auto 100px auto;
		background: #2c3e4f;
		color: #ecf0f5;
		font: 13px/21px "Pontano Sans";
	}

	h1 {
		clear: both;
		font-size: 18px;
		font-weight: normal;
		font-style: normal;
	}

	h1 span {
		font-size: 12px;
		color: #bdc3c7;
	}

	p {
		clear: both;
		padding-top: 40px;
		text-align: right;
	}
	
	a:link, a:visited {
		color: #19bc9c;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		color: #15a085;
	}
	
	.horizontal,
	.vertical,
	.diagonal-1,
	.diagonal-2 {
		width: 200px;
		height: 200px;
		float: left;
		position: relative;

		-webkit-perspective: 850px;
		   -moz-perspective: 850px;
		        perspective: 850px;
	}

	.green {
		background: #2dcc71 url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
	}

	.blue {
		background: #3498db url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
	}

	.purple {
		background: #9b59b6 url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
	}

	.red {
		background: #e74c3c url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
	}

	.orange {
		background: #e67e2a url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
	}

	.grey {
		background: #95a5a6 url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
	}


	figure {
		margin: 0;
		width: 200px;
		height: 200px;
		position: absolute;

		-webkit-transition: -webkit-transform 1s;
		   -moz-transition: -moz-transform 1s;
		        transition: transform 1s;

		-webkit-transform-style: preserve-3d;
		   -moz-transform-style: preserve-3d;
		        transform-style: preserve-3d;
	}

	figure img, figure figcaption {
		display: block;
		height: 200px;
		width: 200px;
		position: absolute;

		-webkit-backface-visibility: hidden;
		   -moz-backface-visibility: hidden;
		        backface-visibility: hidden;
	}
    
	figure figcaption {
		line-height: 340px;
		color: rgba(255,255,255,.8);
		text-align: center;
		font-weight: bold;
		font-size: 14px;
	}

/* generic caption styles */


/* vertical */

	.vertical figure img {
		-webkit-transform: rotateY( 180deg );
		   -moz-transform: rotateY( 180deg );
		        transform: rotateY( 180deg );
	}
	
	.vertical:hover figure {
		-webkit-transform: rotateY( 180deg );
		   -moz-transform: rotateY( 180deg );
		        transform: rotateY( 180deg );
	}
	
/* end vertical */


/* horizontal */

	.horizontal figure img {
		-webkit-transform: rotateX( 180deg );
		   -moz-transform: rotateX( 180deg );
		        transform: rotateX( 180deg );
	}
	
	.horizontal:hover figure {
		-webkit-transform: rotateX( 180deg );
		   -moz-transform: rotateX( 180deg );
		        transform: rotateX( 180deg );
	}
	
/* horizontal */


/* diagonal 1 */

	.diagonal-1 figure img {
		-webkit-transform: rotate3d(2,4,0,180deg);
		   -moz-transform: rotate3d(2,4,0,180deg);
		        transform: rotate3d(2,4,0,180deg);
	}

	.diagonal-1:hover figure {
		-webkit-transform: rotate3d(2,4,0,180deg);
		   -moz-transform: rotate3d(2,4,0,180deg);
		        transform: rotate3d(2,4,0,180deg);
	}
	
/* diagonal 1 */


/* diagonal 2 */

	.diagonal-2 figure img {
		-webkit-transform: rotate3d(4,2,0,180deg);
		   -moz-transform: rotate3d(4,2,0,180deg);
		        transform: rotate3d(4,2,0,180deg);
	}
	
	.diagonal-2:hover figure {
		-webkit-transform: rotate3d(4,2,0,180deg);
		   -moz-transform: rotate3d(4,2,0,180deg);
		        transform: rotate3d(4,2,0,180deg);
	}
	
/* diagonal 2 */

dabblet.html

<h1>Animated image captions v2 <span>— using backface-visibility</span></h1>
	
	<div class="vertical">

		<figure>
			<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/jimi-hendrix.png" alt="Jimi Hendrix" width="200" height="200" />
			<figcaption class="green">Jimi Hendrix</figcaption>
		</figure>
		
	</div>
	
	<div class="diagonal-1">

		<figure>
			<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/dave-gilmour.png" alt="Dave Gilmour" width="200" height="200" />
			<figcaption class="blue">Dave Gilmour</figcaption>
		</figure>
		
	</div>
	
	<div class="horizontal">

		<figure>
			<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/brian-may.png" alt="Brian May" width="200" height="200" />
			<figcaption class="purple">Brian May</figcaption>
		</figure>
		
	</div>
	
	<div class="diagonal-2">

		<figure>
			<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/steve-hackett.png" alt="Steve Hackett" width="200" height="200" />
			<figcaption class="red">Steve Hackett</figcaption>
		</figure>
		
	</div>
	
	<div class="vertical">

		<figure>
			<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
			<figcaption class="orange">Joni Mitchell</figcaption>
		</figure>
		
	</div>
	
	<div class="diagonal-1">

		<figure>
			<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/jimmy-page.png" alt="Jimmy Page" width="200" height="200" />
			<figcaption class="grey">Jimmy Page</figcaption>
		</figure>
		
	</div>
	
	<p>blog article - <a target="_blank" href="http://www.midwinter-dg.com/permalink-animated-image-captions-v2-using-backface-visibility_2013-03-09">Animated image captions v2 - using backface-visibility</a></p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"","page":"html"}