2015-03-02 2 views
-2

Итак, у меня есть проблема. Я хочу вращения DIV быть значение «Энвер»Переменная в jquery .css()

теперь у меня есть это:

function something() { 
    $('.class').css('-webkit-transform:rotate('anVar'deg)') 
} 

после этого CSS должен выглядеть следующим образом:

.class { 
    -webkit-transform:rotate(220deg); 
} 

Спасибо вам

+2

Попробуйте $ (»класс.„) CSS (“-. webkit-transform: rotate ('+ anVar +' deg) ') –

+1

$ ('. class '). css (' - webkit-transform ',' rotate ('+ anVar +' deg) ') – lshettyl

+0

Спасибо! это сработало! –

ответ

1

Не забудьте добавить все префиксы браузера. Я хотел бы создать объект для обработки преобразования, как так:

var transformFn = { 
    rotate: function(object, degree) { 
     $(object).css({ 
      '-webkit-transform': 'rotate(' + degree + 'deg)', 
      '-moz-transform': 'rotate(' + degree + 'deg)', 
      '-o-transform': 'rotate(' + degree + 'deg)', 
      'transform': 'rotate(' + degree + 'deg)', 
      'zoom': 1 
     }); 
    } 
}; 

называть это:

transformFn.rotate($('.class'), 220); 

Вызов этой функции будет вращать объект 220 градусов, но называть его снова не будет вращаться он дополнительно 220 градусов. Если вы хотите сохранить состояние (повернуть объект с его текущего вращения, а не 0), вы могли бы изменить поворота функцию:

rotate: function(object, degree) { 
    if ($(object).attr('data-rotation')) { 
     degree = parseInt($(object).attr('data-rotation')) + degree; 
    } 
    $(object).css({ 
     '-webkit-transform': 'rotate(' + degree + 'deg)', 
     '-moz-transform': 'rotate(' + degree + 'deg)', 
     '-o-transform': 'rotate(' + degree + 'deg)', 
     'transform': 'rotate(' + degree + 'deg)', 
     'zoom': 1 
    }); 
    $(object).attr('data-rotation', degree); 
} 
Смежные вопросы