Add a Transform Value to the Current Transforms That Are Already on the Element

Add a transform value to the current transforms that are already on the element?

You could use the += operator to append the rotateX(20deg) to the already existing transformation.

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

Note: I have used a different transformation in the below snippet for the visual effect but method is the same.

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>

Add a transform value without erasing inherit

div {

  transform: translate(10px, 10px);

  width: 100px;

  height: 100px;

  background: lightblue;

  display: inline-block;

  margin: 50px;

}

div.active {

  transform: translate(10px, 10px) scale(1.1);

}

div.active2 {

  transform: scale(1.1) translate(10px, 10px) rotate(45deg);

}

<div></div>

<div class="active"></div>

How to set a single value of transform while leaving the other values?

There is no way to directly modify a single component of the transform. Sadly, the various possible transforms were implemented as values on the transform attribute, rather than attributes themselves. There is no object model for CSS attribute values - attribute values are always just a string, as far as JavaScript is concerned. It would've been nice if transform was treated as a shorthand attribute for, eg, transform-rotate-y, transform-*, etc, the same way that background is a shorthand attribute for all the background-* attributes. This would've allowed us direct access to the values via JavaScript, but it was not implemented that way, so we are out of luck.

Edit: The simplest way to accomplish this (without studying the spec and doing a bunch of math) would be to nest your elements, applying different transformations to each. If you apply several transformations that won't change, go ahead and combine those on to one element. Any transformation that you do want to change, use a separate element:

Works here: jsfiddle.net/mkTKH/15

---

Edit: My original solution below won't work. In testing it out I discovered that getComputedStyle() converts the transform into a matrix(). An early draft of the spec says:

The transform property of the style object returned by getComputedStyle contains a single CSSTransformValue with a type of CSS_MATRIX. The 6 parameters represent the 3x2 matrix that is the result of applying the individual functions listed in the transform property.

---

So, you have to parse it. If you want to change just one portion of an attribute value, you can use a regular expression to parse the value:

var rotateY = "rotateY(" + deg + "deg)";
var transform = el.style.webkitTransform.replace(/\brotateY([^)]+)\b/, rotateY);
el.style.webkitTransform = transform;

I'd create a reusable function:

function setTransformValue(el, name, value) {
    var currentValue = new RegExp(name + "([^)]+)");
    var style = window.getComputedStyle ? getComputedStyle(el) : el.currentStyle;
    var currentTransform = style.transform ||
                           style.webkitTransform ||
                           style.MozTransform ||
                           style.msTransform ||
                           style.OTransform;
    var transform;
    if (currentValue.test(currentTransform )) {
        transform = currentTransform.replace(currentValue, name + "(" + value + ")");
    }
    else {
        transform = currentTransform + " " + name + "(" + value + ")";
    }
    el.style.transform = transform;
}

Untested.

---

Related Topics