dziudek

/**
 * The first commented line is your dabblet’s title
 */

.circle {
	background: #fff;
	margin: 50px 25px;
	width: 24px;
	height: 24px;
	border: 12px solid #f55;

dziudek

/**
 * Simple animated CSS3 switcher
 */

label {
	display: inline-block;
	line-height: 24px;
}
.switcher {
	display: inline-block;

dziudek

/**
 * CSS arrow
 */

body {
	background: #4546da;
}

.arrow {
	background: #fff;

dziudek

/**
 * Animated circle
 */

#circle {
	background: #f5a;
	border-radius: 50%;
	box-sizing: border-box;
	height: 200px;
	margin: 50px;

dziudek

/**
 * Nice CSS 3D animation
 */

body {
	perspective: 1400;
}

#box {
	background: #d45;

dziudek

/**
 * Responsive devices :)
 */

#responsive {
	background: #fff;
	border: 5px solid #333;
	border-bottom: 17px solid #333;
	border-radius: 5px;
	border-top: 10px solid #333;

dziudek

/**
 * Responsive devices :)
 */

#responsive {
	animation-name: device;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	

dziudek

/**
 * Image Roll
 */

#image-roll {
	height: 200px;
	width: 600px;
	perspective: 600;
}

dziudek

/**
 * Image Roll
 */

#image-roll {
	height: 200px;
	width: 600px;
	-webkit-perspective: 600;
	   -moz-perspective: 600;
	        perspective: 600;

dziudek

/**
 * Image :hover animation I
 */

figure {
	height: 300px;
	overflow: hidden;
	perspective: 600;
	position: relative;
	width: 400px;