jquery .css не записывает стиль в тег. Если удалить 'transform':rotate, то работает 'transform':translate

316
27 сентября 2017, 12:37
$(window).on('mousemove', function(e) {
    var w = $(window).width();
    var h = $(window).height();
    var offsetX = 0.5 - e.pageX / w;
    var offsetY = 0.5 - e.pageY / h;
    $(".parallax").each(function(i,el){
        var offset = parseInt($(el).data('offset'));
        var translate = "translate3d(" + Math.round(offsetX * offset)
         + "px," + Math.round(offsetY * offset) + "px, 0px)";
         console.log(translate)
        var rotate = "rotate3d(" + Math.round(offsetX * offset)
         + "deg," + Math.round(offsetY * offset) + "deg, 0, 0)";
         console.log(rotate)

         $(el).css({
            'transform':translate,
            'transform':rotate
         })
    })
})
Answer 1

Во-первых, одинаковые ключи у объекта не бывают - побеждает последний:

console.log({ 
  'transform': "translate(1px, 1px)", 
  'transform': "rotate(90deg)" 
}['transform'])

Во-вторых, в css только одно свойство transform, значения которого надо перечислять через пробел:

$(el).css('transform', translate + " " + rotate)

либо

$(el).css({
  transform: translate + " " + rotate
})
READ ALSO
Есть ли в javascript(nodejs) хеш-таблицы?

Есть ли в javascript(nodejs) хеш-таблицы?

Есть ли в javascript (или хотя бы в node js), рекомендуемый тип данных, аналогичный хеш таблицам, для хранения уникальности строк большого размера?

324
Анимация контуров фигур svg

Анимация контуров фигур svg

Добрый день, я делаю анимацию контуров, но есть один элемент который я не могу анимировать по контурам (странная кривая, смотрите ниже), поэтому...

299
Как заменить несколько слов в строке? [дубликат]

Как заменить несколько слов в строке? [дубликат]

Данный вопрос уже был задан и имеет решение:

210