CODEWITHSUNDEEP
jquerycss
Chapsterj
Chapsterj

Reputation: 6625

Passing a rotation value to css

I have a variable called value in my js that gets updated based on the scrollbars percent. my value is between 0 - 360. I want a way to update the below css values. Is there a way I can group them together in an object and pass the value to them. For example when using opacity I can do something like this.

function updateCSS(target, value){
 var cssObj = {};
 cssObj["opacity"] = value;
 target.css(cssObj);
}

I need a way to be able to update all the prefix rotate property with my value number. Any good ideas how I could do this.

-webkit-transform: rotate(value);  /* Safari 3.1+, Chrome 
     -moz-transform: rotate(value);  /* Firefox 3.5-15 
      -ms-transform: rotate(value);  /* IE9+ 
       -o-transform: rotate(value);  /* Opera 10.5-12.00 
          transform: rotate(value);  /* Firefox 16+, Opera 12.50+

Upvotes: 0

Views: 561

Answers (4)

HellaMad
HellaMad

Reputation: 5374

Just use the .css() method, and also you forgot to include deg:

function updateCSS(target, value){
    target.css({
        '-webkit-transform': 'rotate('+value+'deg)',
        '-moz-transform': 'rotate('+value+'deg)',
        '-ms-transform': 'rotate('+value+'deg)',
        '-o-transform': 'rotate('+value+'deg)',
        'transform': 'rotate('+value+'deg)'
    });
}

Fiddle: http://jsfiddle.net/XKyEz/3/

Upvotes: 0

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

You can do it with jquery very simply:

$(target).css('opacity',value);

Upvotes: 0

nathan
nathan

Reputation: 5506

You can use the style object to change CSS properties:

var style = element.style;
style.WebkitTransform =
    style.MozTransform =
    style.msTransform =
    style.OTransform =
    style.transform = 'rotate(' + angle + ')';

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

CSS is not a programming language. It does not support variables. You need to use JavaScript to do this.

$(target).attr('-webkit-transform', 'rotate('+value+')'); ....etc

Upvotes: 0

Related Questions