Can I pass a value to a CSS function?

Question

I have a speedometer. I would like to show the speed depending on what value was entered in the textbox. Here is the demo. Here is the code, if you would like to browse. The main code where I need to update the value is.

@-webkit-keyframes rotate {
    from {-webkit-transform:rotate(0deg);}
        to {-webkit-transform:rotate(180deg);} <-- I need to update 180deg on the fly
}

In ideal situation, I need to pull this value from a database. But just wondering is there a way to update this field anyhow on the go? May be JavaScirpt?

Speedometer

Note:The demo works only in Safari and Chrome, not in firefox and IE

possible duplicate of [programmatically changing webkit-transformation values in animation rules](http://stackoverflow.com/questions/5105530/programmatically-changing-webkit-transformation-values-in-animation-rules) — thirtydot, Oct 03 '11 at 13:25

score 1 · Answer 1 · answered Oct 03 '11 at 13:20

1

You can define the syle hardcoded in the HTML file. And change it with a JS declaration in PHP. Not very strict, but it does the trick :)

answered Oct 03 '11 at 13:20

Michiel

7,855
16
61
113

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

You may wish to try here for some solutions.

Seems as though you will have to write out a whole new CSS rule onto the page in Javascript. Or create numerous classes and change the class with Javascript, but this would not prove practical for you as you would need potentially 360 classes.

edited May 23 '17 at 12:13

Community

1
1

answered Oct 03 '11 at 13:25

Matt Derrick

5,674
2
36
52

2

You might want to update that link, at the moment it's pointing to this question :) – thirtydot Oct 03 '11 at 13:26
1

I got a stackoverflow exception following your link ;) – Guillaume86 Oct 03 '11 at 13:27

score 0 · Answer 3 · answered Oct 03 '11 at 13:28

0

You should try to use a css preprocessor like LESS.js or SASS:

http://lesscss.org/

http://sass-lang.com/

answered Oct 03 '11 at 13:28

Guillaume86

14,341
4
53
53

less.js seems better if you want to refresh client side. – Guillaume86 Oct 03 '11 at 13:29

score 0 · Accepted Answer · answered Oct 11 '11 at 20:50

0

My answer: No you can not.

But you can create the whole CSS using PHP. The best bet is to use PHP to generate the entire CSS esp the one you need to modify according to the user settting.

answered Oct 11 '11 at 20:50

TheTechGuy

16,560
16
115
136

Can I pass a value to a CSS function?

4 Answers4