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

时间:2012-07-31 02:40:12

标签: css css3 css-transforms

假设我有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属性,因此移动会覆盖旋转。是否有可能使值堆叠在一起而不是相互覆盖?

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

参考:jsFiddle

3 个答案:

答案 0 :(得分:12)

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

.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);
}​

答案 1 :(得分:1)

如何使用关键帧?

演示: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);}
} 

答案 2 :(得分:0)

你说,“我有很多DIV,因此在分配各自的属性之前,选择所有这些DIV并应用它们的公共属性会更有效率。”编码可能更有效,但遗憾的是不是结果。唯一的方法是在一次通话中完成所有操作(因为BoltClock只是打败我发布)。

要重新获得效率,请查看使用LESSSCSS预处理。 Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.