从样式表中的多个选择器堆叠CSS3变换函数

Question

假设我有2个DIV:

?<div class="div1"></div>
<div class="div2"></div>??????????????????????????????

我想要旋转它们:

div {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

然后我想独立移动它们:

.div1 {
    background-color: red;
    -webkit-transform: translate(100px,0px);
    -moz-transform: translate(100px,0px);
}
.div2 {
    background-color: green;
    -webkit-transform: translate(0px,100px);
    -moz-transform: translate(0px,100px);
}?

问题是旋转和移动都使用transform属性,因此移动会覆盖旋转.是否有可能使值堆叠在一起而不是相互覆盖？

注意:
我将使用复杂的变换函数,而不仅仅是简单的翻译,所以我不能用just left和topproperties 替换它们.
我有很多 DIV,因此在分配各自的属性之前,选择所有这些DIV并应用它们的公共属性会更有效.

参考:jsFiddle

Answer 1

不幸的是,由于语法和级联如何工作,您将无法按描述堆栈转换.您必须在翻译之前重新声明轮换:

.div1 {
    background-color: red;
    -webkit-transform: rotate(30deg) translate(100px,0px);
    -moz-transform: rotate(30deg) translate(100px,0px);
}
.div2 {
    background-color: green;
    -webkit-transform: rotate(30deg) translate(0px,100px);
    -moz-transform: rotate(30deg) translate(0px,100px);
}?