Cleaning up code on css lotus

[jgessentials]

Hi
I am trying to add a pulse to the petals on hover but there is a “transform” conflict.
To show up properly the petals all already have a rotate(x deg)
The keyframes pulse works for the first petal with the added rotate(x deg) but the others obviously don’t work.
Any ideas how to go about this to make it work?

http://dabblet.com/gist/1911700

Thank you for any ideas you might have

[jgessentials]

will do thank you :)

[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;}

[jgessentials]

Excellent work! I actually just finished and did the exact same thing as you, that is nice validation for me thank you!
Now I have to add text inside the petals…another interesting challenge. Thank you!

[jgessentials]

you mean line height the same as the petal height:200px?

[jgessentials]

nice, got it. Now how can I add rotate to the text as well to get it lined up the way I would like?
Right now I have this:

.labels {

line-height:200px;

text-align:center;

color:#ffffff;

font-size:18px;

font-family: 'Inika', serif;

}





DETOXIFICATION

Do I need to define keyframes for labels as well?

[Schot]

i think unique classes for each petal span might do it.

Fun project btw!

[jgessentials]

Glad you are enjoying this. So none of this works in IE does it?
I am getting weird results.

http://healingaia.com/lotus-test.php

[Schot]

Ah, here we go. Replace span with div so you can apply webkit etc. and then create unique classes for each petal using negative rotate numbers to negate parent rotate values.

http://dabblet.com/gist/1919152

DETOXIFICATION




.detoxlabel {

-webkit-transform: rotate(-225deg);

line-height:200px;

text-align:center;

color:#ffffff;

font-size:18px;

font-family: 'Inika', serif;

}

P.s.
Yes, broken in IE and FF.

[jgessentials]

Excellent thank you so much for your help.

[jgessentials]

So here is the final result: (A special Thank you to Schot & karlpcrowley for their help and patience)

http://healingaia.com/lotus-test.php

Now for the big challenge :)
How can I make this work on IE and FF?
Should I have gone with jquery?

[joshuanhibbert]

Here is the support table for CSS animation: http://caniuse.com/#search=css3%20animation

jQuery would be the way to go if you need a wider range of supported browsers.

[jgessentials]

wow I know very little about jquery but would really like this to be visible on all browsers. Any suggestions in terms of resources or places I can find help?
Thank you so much

[jgessentials]

Will definitely start working with that thank you!
I think I might need to place the petals using jquery as well as they aren’t even showing up right in IE.

[jgessentials]

Got this to work nicely.
http://jsfiddle.net/QJFYJ/48/
I might have to use images instead of the css setup for the petals so it can be fully cross browser.
Do you know how to position images using jquery?
Maybe I should take this to the javascript forum now :)

[Author]

Posts