Set CSS transform in multiple places

Question

Is there any way to set style transform: translateX(100px) translateY(200px) rotate(100deg) scale(1.5) on multiple places? For example, there are these lines in CSS:

.translate-x {
    transform: translateX(100px);
}

.translate-y {
    transform: translateY(200px);
}

.rotate {
    transform: rotate(100deg)
}

.big {
    transform: scale(1.5);
}

And then, I would like use these classes in HTML to combine transform.

<div class="translate-x rotate big"></div>
<div class="translate-y big"></div>
...

The problem is that the styles do not combine, but the last one will overwrite the others.

Only way what I know is combine all classes. But there are many combinations...

.translate-x.translate-y {
    transform: translateX(100px) translateY(200px);
}

.translate-x.translate.y.big {
    transform: translateX(100px) translateY(200px) scale(1.5);
}

...

Similar to this - https://stackoverflow.com/q/10765755/483779 — Stickers, May 23 '17 at 16:09

score 2 · Accepted Answer · answered May 23 '17 at 16:12

Unfortunately, you cannot do it. Syntax for transform is as follows,

transform: none|transform-functions|initial|inherit;

So when you call multiple classes on your HTML element, only the last class declared in your CSS is applied. (class order doesn't matter in HTML)

The best you can do is use CSS preprocessor with a function which will generate a string of these transform functions called in one declaration so that they don't override.

score 0 · Answer 2 · answered Sep 30 '17 at 07:24

As the answer stated above said this currently is impossible by means of lone css. You'd need to use javascript to apply it for you.

Here is a small jQuery example

$('.my-element').css({
'transform': 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)'
});

The vanilla JS way is the following:

var myElement = document.getElementsByClassName('my-element');
myElement.style.transform = 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)';

You should be able to use the following 3 methods to apply either:

Event listeners (preferably with event delegation)
Functions
Just including your script at the bottom of the body so that the elements render before they are transformed to prevent glitching.

Set CSS transform in multiple places

2 Answers2