CODEWITHSUNDEEP
javascripthtmlcsscss-transforms
Mike Resoli
Mike Resoli

Reputation: 967

Using multiple .style.transform on same element

It seems that by using two cases of obj.style.transform in succession results in only the first statement being executed. Please see the below code. A full example is on CodePen.

function animateObject(x, y, z){
    object = document.getElementsByClassName('cub-1')[0];

    object.style.transform = "rotateX(" + x + "deg)";
    object.style.transform = "rotateY(" + y + "deg)";
    alert("")
}

In the full example, I am reading lines from a text area which contains x, y and z positions of an object, converting the values from radians to degrees and then animating my 3d object using these values.

Upvotes: 5

Views: 8751

Answers (2)

Exodus 4D
Exodus 4D

Reputation: 2822

You could use DOMMatrix to build/chain your CSS transform.

Then stringify the resultant matrice with its build in DOMMatrixReadOnly.toString(). Which returns CSS ready transform syntax.

window.onload = () => {
  const getStyle = id => document.getElementById(id).style;

  // Rotate in plane
  getStyle('Ⅰ').transform = new DOMMatrix('rotateZ(45deg)');
  // Rotate from [1,1] vector (diagonal)                      (same as Ⅰ)
  getStyle('Ⅱ').transform = new DOMMatrix().rotateFromVectorSelf(1, 1);
  // Rotate matrix on Z axis.                                  (same as Ⅰ & Ⅱ)
  getStyle('Ⅲ').transform = new DOMMatrix().rotateAxisAngleSelf(0, 0, 1, 45);

  // Rotate matrix on X axis. Then rotate matrix on Y axis.
  getStyle('Ⅳ').transform = new DOMMatrix('rotateX(45deg) rotateY(45deg)');
  // Rotate matrix on X axis. Then rotate matrix on Y axis    (same as Ⅳ)
  getStyle('Ⅴ').transform = new DOMMatrix('rotateX(45deg)').multiply(new DOMMatrix('rotateY(45deg)'));

  // Rotate matrix on Y axis. Then rotate matrix on X axis.
  getStyle('Ⅵ').transform = new DOMMatrix('rotateY(45deg)').multiply(new DOMMatrix('rotateX(45deg)'));
  // Rotate matrix on Y/X axis.                               (same as Ⅵ)
  getStyle('Ⅶ').transform = new DOMMatrix().rotateSelf(45, 45);
};
.element {
  transition: transform 1s;
  padding: 5px;
  opacity: .7;
}

.element::after {
  content: attr(id);
}

#Ⅰ { background: red; transition-delay: 0s;}
#Ⅱ { background: green; transition-delay: 1s; }
#Ⅲ { background: blue; transition-delay: 2s; }
#Ⅳ { background: orange; transition-delay: 3s; }
#Ⅴ { background: purple; transition-delay: 4s; }
#Ⅵ { background: pink; transition-delay: 5s; }
#Ⅶ { background: coral; transition-delay: 6s;}

.frame {
  position: relative;
  margin: 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80px;
  grid-auto-rows: 80px;
  border: 1px solid;
}
<div class="frame">
  <div class="element" id="Ⅰ"></div>
  <div class="element" id="Ⅱ"></div>
  <div class="element" id="Ⅲ"></div>
  <div class="element" id="Ⅳ"></div>
  <div class="element" id="Ⅴ"></div>
  <div class="element" id="Ⅵ"></div>
  <div class="element" id="Ⅶ"></div>
</div>

Upvotes: 0

Harry
Harry

Reputation: 89750

When applying multiple transforms to the same element, they should be added as space separated values to the same property like below. Otherwise, they would get overwritten (only the rotateY will be applied because it is the latest).

object.style.transform = "rotateX(" + x + "deg)";
object.style.transform += "rotateY(" + y + "deg)";

I have added an alert of the object.style.transform to both the original snippet and the modified version and we can see how the original one always outputs only the rotateY whereas the changed one outputs both rotateX() and rotateY() together.

Original Code with Alerts added | Modified Code with Alerts added

Upvotes: 8

Related Questions