CSS3 dynamic animation tag

[jd447]

Hello!

I was wondering, would it be possible to do a kind of tag to ease the use of CSS3 animations. Let me explain myself.

Would be nice to have some kind of:

[[$css3]] rotate(0deg) scale(1.03) skew(0deg) translate(0px);

instead of:
-webkit-transform: rotate(0deg) scale(1.03) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.03) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1.03) skew(0deg) translate(0px);

which would dynamically create the 3 needed code lines.

any clue?

jd

[spcherub]

You can do this with a UDT. Something like this should work:

Code: Select all

$styles = $params['styles'];

if( $styles != '') {
	print "-webkit-transform: ".$styles.";";
	print "-moz-transform: ".$styles.";";
	print "-o-transform: ".$styles.";";
}

Name it "my_css3_animation" or something like that. Then you can call it in your stylesheet like this:

Code: Select all

[[my_css3_animation style="rotate(0deg) scale(1.03) skew(0deg) translate(0px)"]]

NOTE: I've not tested the above code, but it should work in principle.

Hope that helps.
-S