Can we apply the CSS3 transform values individually?

Question

Can CSS3 transform values be applied individually?

Details:

For example, in https://jsfiddle.net/eaqvyt1a/ we have the translate(100px, 100px), and after 2 seconds, a rotation is needed, so transform: rotate(3deg) is applied, but it will wipe out the translate -- this way, it is similar to, when we use background: yellow then it will wipe out the background-image property.

So, can we apply the rotate individual, so that the translate will stay? If we "concatenate" the strings of translate() and rotate() together, that will work, but then it becomes too much of string manipulation, because, what if we need another translate(), then do we add to that string (then it becomes a longer and longer string and messy), or do we search in that string and remove the original translate and add the new translate? It is kind of messy too. That is, can we just say, rotate a little bit, regardless of how much you translated from x and y, just stay there and do the rotation?

P.S. and then, I thought of a way, but requires JavaScript, which is to keep an object of properties we want to transform, for example, { translate: [100,100], rotate: 30} so that we dynamically create the string and apply to transform. To change any rotation amount, we first change that object first (like obj.rotate = 45), and then call the function to get that new string to use for transform.

i don't think its possible you can try something like this [fiddle](https://jsfiddle.net/eaqvyt1a/1/) — Vitorino fernandes, Jan 01 '16 at 09:58
If you're concerned about `translate`, then there are non-transform alternatives available, in the form of positioning, margins etc. Not for most of the other functions though... — Mr Lister, Jan 01 '16 at 10:24
Anyway, if you're using JavaScript anyway, what is the problem? Adding and removing transform functions is not _that_ much more work than adding and removing classes. — Mr Lister, Jan 01 '16 at 10:29
One way I just thought of is to explicitly write out all combinations of possible transforms in the CSS. Like [this fiddle](https://jsfiddle.net/MrLister/eaqvyt1a/3/). — Mr Lister, Jan 01 '16 at 10:41
Some related threads that may help you - http://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element?lq=1, http://stackoverflow.com/questions/34411082/animate-transform-only-one-property-scale-override-other-translate/34412049#34412049, http://stackoverflow.com/questions/30010523/add-a-transform-value-to-the-current-transforms-that-are-already-on-the-element/30010571#30010571 (In short, with CSS transforms the only way is to append the transforms to the existing one) — Harry, Jan 01 '16 at 11:21

tyau · Answer 1 · 2016-02-10T07:20:11.310

If you want to stack multiple transform values and still have it flexible enough where you can toggle one value, why not use multiple wrappers?

This will ensure the translate values are untouched when you update the rotation.

HTML

<div class="translate-element">
    <div class="rotate-element spin">
    </div>
</div>

CSS

.translate-element {
    transform: translate(100px, 100px)
}

.rotate-element {
    transform: rotate(3deg);
}

.rotate-element.spin {
    transform: rotate(30deg);
}

Can we apply the CSS3 transform values individually?

1 Answers1