<!-- 
     Burak Can
     www.brkcan.net
     twitter.com/neoberg
-->
<body>
	<div id="container">
    	<input type="checkbox" id="checkbox" name="checkbox">
        <label for="checkbox">
        	<div id="plus">+</div>
            <div class="image" id="one"></div>
            <div class="image" id="two"></div>
            <div class="image" id="three"></div>
            <div class="image" id="four"></div>
            <div class="image" id="five"></div>
        </label>
    </div>
</body>
body {
		background: url('http://brkcan.net/fun/codepen/wood_texture.png');
	}
	#container {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -50px 0 0 -50px;
		perspective: 600;
	}
	#checkbox {
		width: 38px;
		height: 38px;
		display:block;
		opacity: 0;
		z-index: 2;
		position:absolute;
		left: 0px;
		bottom: 0px;
	}
	#plus {
		width: 38px;
		height: 38px;
		background: #ff005a;
		border-radius: 19px;
		position:absolute;
		left: 0px;
		bottom: 0px;
		z-index:5;
		text-align:center;
		line-height: 38px;
		color: #fff;
		font-size: 20px;
		font-weight:bold;
		transition: all 200ms ease-out;
	}
	.image {
		width: 92px;
		height: 92px;
		background: #fff;
		border: 4px solid #fff;
		border-radius: 4px;
		box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, 0.29);
		position:absolute;
		transition: all 200ms ease-out;
		z-index: 1;
	}
	.image#one {
		transform: translateY( 10px ) translateX( 20px )  rotateX( 60deg );
		background: url('http://brkcan.net/fun/codepen/danbo1.jpg');
	}
	.image#two {
		transform: translateY( 6px ) translateX( 20px )  rotateX( 60deg );
		background: url('http://brkcan.net/fun/codepen/danbo2.jpg');
	}
	.image#three {
		transform: translateY( 2px ) translateX( 20px )  rotateX( 60deg );
		background: url('http://brkcan.net/fun/codepen/danbo3.jpg');
	}
	.image#four {
		transform: translateY( -2px ) translateX( 20px )  rotateX( 60deg );
		background: url('http://brkcan.net/fun/codepen/danbo4.jpg');
	}
	.image#five {
		transform: translateY( -6px ) translateX( 20px )  rotateX( 60deg );
		background: url('http://brkcan.net/fun/codepen/danbo5.jpg');
	}
	#checkbox:checked+label .image#one {
		transform: translateY( 220px ) translateX( 20px )  rotateX( 0deg );
		background: url('http://brkcan.net/fun/codepen/danbo1.jpg');
	}
	#checkbox:checked+label .image#two {
		transform: translateY( 115px ) translateX( 20px )  rotateX( 0deg );
		background: url('http://brkcan.net/fun/codepen/danbo2.jpg');
	}
	#checkbox:checked+label .image#three {
		transform: translateY( 10px ) translateX( 20px )  rotateX( 0deg );
		background: url('http://brkcan.net/fun/codepen/danbo3.jpg');
	}
	#checkbox:checked+label .image#four {
		transform: translateY( -95px ) translateX( 20px )  rotateX( 0deg );
		background: url('http://brkcan.net/fun/codepen/danbo4.jpg');
	}
	#checkbox:checked+label .image#five {
		transform: translateY( -200px ) translateX( 20px )  rotateX( 0deg );
		background: url('http://brkcan.net/fun/codepen/danbo5.jpg');
	}
	#checkbox:checked+label #plus {
		background: #000;
		opacity: 0.5;
	}
/*    Look, there is no js :)    */
/*    http://www.brkcan.net      */
/*    twitter.com/neoberg        */

/*I AM LOOKING FOR A DRIBBBLE INVITE*/
/* http://dribbble.com/neoberg */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.