How to combine transforms on different classes?

Question

I have two classes where each of them has a transform, how I can to combine them? I know I can do "transform: transform1, transform", but in this case I have them in different clases and the second replaces the first.

I can't use JavaScript.

Thank you!

Add example: https://codepen.io/anon/pen/BmwrgY

.class1,
.class2 {
  width: 20px;
  height: 20px;
  background-color: blue;
}

.class1 {
  transform: rotate(45deg);
}

.class2 {
  transform: translate3d(50px, 50px, 0);
}

<div class="class1"></div>

<div class="class2"></div>

<div class="class1 class2"></div>

Your question is unclear. Please share here the minimum code necessary to replicate your problem — Mihai T, Nov 16 '17 at 09:08
Please add your code on your post and please read how to [create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — McMillan Cheng, Nov 16 '17 at 09:11
As @Scoots answer says use `.class1.class2 { transform: rotate(45deg) translate3d(50px, 50px, 0); } ` — Mihai T, Nov 16 '17 at 09:18

Scoots · Accepted Answer · 2017-11-16T13:08:55.850

2

You have to make a new rule for elements with both classes

.class1 {
    transform: rotate(45deg);
}

.class2 {
    transform: translate3d(50px, 50px, 0);
}

.class1.class2 {
    transform: rotate(45deg) translate3d(50px, 50px, 0);
}

edited Nov 16 '17 at 13:08

answered Nov 16 '17 at 09:10

Scoots

3,048
2
21
33

But this is repeating code, right? There are not some solution without repeat? My problem is the "transform: translate3d" is variable for each element. – Aitor Nov 16 '17 at 09:24
1

It's not repeating code though. `transform` is the property, all three permutations of classes have a different value for that property. There is no way to combine two different values for the same property without fully re-defining it. – Scoots Nov 16 '17 at 12:47

How to combine transforms on different classes?

1 Answers1

Linked