css - 如何组合不同类的变换？

Question

我有两个类，每个类都有一个变换，我如何将它们组合起来？ 我知道我可以执行“transform:transform1，transform”，但在这种情况下，我将它们放在不同的类中，第二个替换第一个。

我无法使用 JavaScript。

谢谢!

添加示例: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>

Answer 1

您必须为具有这两个类的元素制定新规则

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

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

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