5

動的に追加され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を失うことなくを追加する方法はありますか?translateXtranslateY

4

1 に答える 1

6

演算子を使用して、既存の変換に+=を追加できます。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>

于 2015-05-03T05:32:02.923 に答える