Re: Cleaning up code on css lotus

[Schot]

Tada!
http://dabblet.com/gist/1914694 *use chrome*

Used only chrome webkit to simplify debugging. You just needed to make unique keyframes for each petal to get around the rotation problem. :)

@-webkit-keyframes detoxpulse {

0% { -webkit-transform: scale(1) rotate(45deg); }

80% { -webkit-transform: scale(1.05) rotate(45deg); }

100% { -webkit-transform: scale(1) rotate(45deg);}

}



@-webkit-keyframes dietpulse {

0% { -webkit-transform: scale(1) rotate(90deg); }

80% { -webkit-transform: scale(1.05) rotate(90deg); }

100% { -webkit-transform: scale(1) rotate(90deg);}

}



@-webkit-keyframes hairpulse {

0% { -webkit-transform: scale(1) rotate(135deg); }

80% { -webkit-transform: scale(1.05) rotate(135deg); }

100% { -webkit-transform: scale(1) rotate(135deg);}

}



@-webkit-keyframes nutrientspulse {

0% { -webkit-transform: scale(1) rotate(180deg); }

80% { -webkit-transform: scale(1.05) rotate(180deg); }

100% { -webkit-transform: scale(1) rotate(180deg);}

}



@-webkit-keyframes lifestylepulse {

0% { -webkit-transform: scale(1) rotate(225deg); }

80% { -webkit-transform: scale(1.05) rotate(225deg); }

100% { -webkit-transform: scale(1) rotate(225deg);}

}





.lotus {padding: 300px 100px;}

.petal { position: absolute;

-webkit-border-radius: 165px 10px 165px 10px;

-webkit-transform-origin: 100% 0;

height: 200px;

width: 200px;

opacity:0.84; }

.detox { background: #ff3399; -webkit-transform: rotate(45deg); }

.detox:hover { opacity:1; z-index:+1; -webkit-animation: detoxpulse .4s ease-in; }



.diet { background: #ffac40; -webkit-transform: rotate(90deg); }

.diet:hover {opacity:1;z-index:+1;-webkit-animation: dietpulse .4s ease-in;}



.hair {background: #ffff00;-webkit-transform: rotate(135deg);}

.hair:hover {opacity:1;z-index:+1;-webkit-animation: hairpulse .4s ease-in;}



.nutrients {background: #70c92a;-webkit-transform: rotate(180deg);}

.nutrients:hover {opacity:1;z-index:+1;-webkit-animation: nutrientspulse .4s ease-in;}



.lifestyle {background: #6ac5f1;-webkit-transform: rotate(225deg);}

.lifestyle:hover {opacity:1;z-index:+1;-webkit-animation: lifestylepulse .4s ease-in;}