假设我有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
属性,因此移动会覆盖旋转。是否有可能使值堆叠在一起而不是相互覆盖?
注意:
我将使用复杂的变换函数,而不仅仅是简单的翻译,因此我不能仅使用left
和top
属性替换它们。
我有许多 DIV,因此在分配各自的属性之前,选择所有这些并应用它们的公共属性会更有效。
参考:jsFiddle
答案 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只是打败我发布)。
要重新获得效率,请查看使用LESS或SCSS预处理。 Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.