Acconut

/*
 * Some testings
 */
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}
#container {
	width:184px;
	height:184px;

Acconut

/*
 *
 */
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}
#container {
	width:184px;
	height:184px;

Acconut

/*
 * 
 */
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}
#container {
	width:184px;
	height:184px;

Acconut

/*
 * 
 */
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}
#container {
	width:184px;
	height:184px;

Acconut

/**
 * Amazing fire effect
 */
 
h1 {
	text-align: center;
	margin: 100px auto;
	font-family: "League-Gothic", Courier;
	font-size: 100px;
	text-transform: uppercase;

Acconut

/**
 * CSS Ribbon
 */

#box {
	position: relative;
	width: 300px;
	height: 75px;
}

Acconut

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

#outer {
	height: 100px;
	width: 100px;
	background: red;
	transition: all 1s ease;
}

Acconut

/**
 * CSS Ribbon
 */

#box {
	transition: all 1s;
	position: relative;
	width: 300px;
	height: 75px;
}

Acconut

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

#warpper {
	width: 20px;
	height: 20px;
	text-align: center;
	padding: 5px 0px;
	box-shadow: inset 0px -5px 10px white, inset 0px 5px 10px white;

Acconut

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

#warpper {
	height: 200px;
	width: 200px;
	background: red;
	position: relative;
}