Clever Geek Handbook

Why does CSS transform, transform change rotation for rotated elements?

I have several elements that are rotated and I wanted to translate them in order to shift their horizontal position. However, when I did a simple transformation / translation, the rotation of the elements was lost and reverted to what it was originally (no rotation).

I fixed this by doing a transform / translate / rotate to shift the elements, but I'm curious why the rotation is lost on transition (x, y)? I'm using d3.js, is this the way this library handles transformations, or does CSS do it naturally?

+3


source to share


1 answer


This is the same as for every css attribute.

Due to its cascading nature, if you override the transformation declaration, only the latest changes will be applied:

.element{
   transform:rotate(angle);
   transform:translate3d(x,y,z);     /* now only the translation will be applied*/
}

To use both conversions, they must be in the same declaration:



.element{
   transform:rotate(angle) translate3d(x,y,z);
}

Since D3 uses CSS to transform it, the previous ones will be overwritten with the newest.

small example

+4


source






More articles:


All Articles