Stacking CSS3 Transformationsfunktionen von mehreren Selektoren in Sheet

Question

Lasst uns sagen, ich habe 2 DIVs:

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

Ich möchte beide drehen:

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

Und dann will ich sie unabhängig bewegen:

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

das Problem besteht darin, dass sowohl die rotierenden und die Bewegungs verwenden, um die transform Eigenschaft, so dass die bewegliche overrid Es ist das Drehen. Ist es möglich, die Werte zusammen zu stapeln anstatt sich gegenseitig zu übersteuern?

Hinweise:
I komplexe Transformationsfunktionen verwendet wird, nicht nur einfache Übersetzungen, also kann ich sie nicht ersetzen mit nur left und top Eigenschaften.
Ich habe viele Divs, so dass es viel effizienter ist, alle von ihnen auszuwählen und ihre gemeinsamen Eigenschaften anzuwenden, bevor Sie ihre individuellen Eigenschaften zuweisen.

Referenz: jsFiddle

Answer 1

Leider darauf zurückzuführen, wie die Syntax und die Kaskade arbeitet, werden Sie nicht in der Lage sein, Transformationen zu stapeln, wie beschrieben. Sie werden die Drehungen, bevor die Übersetzungen neu deklarieren müssen:

.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

Sie Zustand, „Ich habe viele DIVs haben, so ist es viel effizienter, alle von ihnen zu wählen und ihre gemeinsamen Eigenschaften gelten, bevor ihre individuellen Eigenschaften zuweisen. " Es kann für Sie effizienter sein, aber leider nicht für die Ergebnisse. Der einzige Weg ist, sie alle in einem einzigen Anruf zu erledigen (wie BoltClock mich gerade zum Posten schlägt).

Um die Effizienz wiederherzustellen, verwenden Sie LESS oder SCSS Vorverarbeitung. Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.

Answer 3

Wie wäre es mit Keyframes?

Demo: jsFiddle

Code:

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