css - 在样式表中从多个选择器中堆叠 CSS3 转换函数

Question

假设我有 2 个 DIV：

​&lt;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属性，因此移动会覆盖旋转。是否可以将值堆叠在一起而不是相互覆盖？

注意：
我将使用复杂的变换函数，而不仅仅是简单的翻译，所以我不能用 justleft和top属性来代替它们。
我有很多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);
}​

Answer 2

如何使用关键帧？

演示：jsFiddle

代码：

.div1 {
    background-color: red;
    -webkit-animation: divone 2.0s ease-in-out forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1.0s;

}

.div2 {
    background-color: green;
    -webkit-animation: divtwo 2.0s ease-in-out forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1.0s;

}

@-webkit-keyframes divone
{

0%   {-webkit-transform: rotate(0deg);}
50%    {-webkit-transform: rotate(30deg);}
100%  {-webkit-transform: rotate(30deg) translate(100px,0px);}
}


@-webkit-keyframes divtwo
{
0%    {-webkit-transform: rotate(0deg);}
50%    {-webkit-transform: rotate(30deg);}
100%  {-webkit-transform: rotate(30deg) translate(0px,100px);}
} 

Answer 3

您说：“我有很多 DIV，因此在分配它们各自的属性之前选择所有 DIV 并应用它们的公共属性会更有效。” 它可能对您编码更有效，但不幸的是对结果没有。唯一的方法是在一个电话中完成所有这些（因为 BoltClock 刚刚击败我发布）。

要恢复效率，请考虑使用LESS或SCSS预处理。最近关于为多个转换设置 LESS 的问题的另一个答案可能对您有所帮助。