Добавить значение преобразования к текущим преобразованиям, которые уже есть в элементе?

Допустим, у меня есть div, в котором значения translateX и translateY добавляются динамически.

<div class="object child0" 
     style="-webkit-transform: translateX(873.5px) translateY(256px); 
            width: 50px; height: 50px;">

Я хочу добавить rotateY(20deg) к текущим преобразованиям, но применение его через element.style.webkitTransform = "rotateX(20deg)" теряет другие значения.

Есть ли способ добавить rotateY без потери преобразований translateX и translateY?


javascript jquery css css-transforms webkit-transform
person nuway    schedule 03.05.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать оператор +=, чтобы добавить rotateX(20deg) к уже существующему преобразованию.

el.style.webkitTransform += "rotateX(20deg)";

Примечание. Я использовал другое преобразование в приведенном ниже фрагменте для визуального эффекта, но метод тот же.

window.onload = function() {
  var el = document.getElementsByTagName("div")[0];
  el.style.webkitTransform += "rotateZ(20deg)";
  console.log(el.style.webkitTransform);
  document.getElementById("changeDeg").onclick = changeDeg; //event handler
}

function changeDeg() {
  var el = document.getElementsByTagName("div")[0];
  var re = /(rotateZ)(\(.*(?:deg\)))/g; //regex to match rotateZ(...deg)
  var newDeg = 40;
  if (el.style.webkitTransform.match(re).length != -1) {
    el.style.webkitTransform = el.style.webkitTransform.replace(re, '$1(' + newDeg + 'deg)'); // $1 is first capturing group which is "rotateZ"
  }
  console.log(el.style.webkitTransform);
}
div {
  background: red;
  margin-bottom: 20px;
}
<div class="display-object child0" style="-webkit-transform: translateX(43.5px) translateY(6px); width: 50px; height: 50px;"></div>
<button id="changeDeg">Change Rotation</button>

person Harry    schedule 03.05.2015
comment
это работает, спасибо. но если я хочу снова изменить вращение, он будет продолжать добавлять rotateZ (someValue). Я хочу иметь возможность свободно добавлять преобразования и изменять их значения. нет ли способа безопасно добавить преобразование или изменить его значение, не проверяя, существует ли этот тип значения? - person nuway; 03.05.2015
comment
Вы не можете определить два отдельных свойства transform в CSS (или встроенных стилях), потому что последнее заменит предыдущее. Единственный способ добиться этого с помощью JS или jQuery — это получить существующую строку и добавить (или удалить существующие значения по мере необходимости). - person Harry; 03.05.2015
comment
@nuway: я знаю, что вы, вероятно, сможете сами понять регулярное выражение, но я добавил образец во фрагмент для вашей справки. - person Harry; 03.05.2015