apilamiento CSS3 funciones de transformación de varios selectores de hoja de estilo

Question

Digamos que tengo 2 DIV:

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

Quiero girar ambos:

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

Y luego quiero mover de forma independiente:

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

el problema es que tanto la rotación y el movimiento utilizar la propiedad transform, por lo que el movimiento OVERRID es la rotación. ¿Es posible hacer que los valores se junten en lugar de anularse entre ellos?

Notas:
Me va a utilizar funciones de transformada compleja, no sólo traducciones simples, por lo que no se puede sustituir con sólo left y top propiedades.
Tengo muchos DIVs, por lo que es mucho más eficiente seleccionarlos todos y aplicar sus propiedades comunes, antes de asignar sus propiedades individuales.

Referencia: jsFiddle

Answer 1

Desafortunadamente, debido a la forma en la sintaxis y el trabajo en cascada, no se podrán apilar transformadas como se describe. Tendrá que redeclare las rotaciones antes de que las traducciones:

.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

estado usted, "Tengo muchos DIVs, por lo que es mucho más eficiente para seleccionar todos ellos y aplicar sus propiedades comunes, antes de asignar sus propiedades individuales. " Puede ser más eficiente para la codificación, pero desafortunadamente no para los resultados. La única forma es hacerlos todos en una sola llamada (como BoltClock solo me gana para publicar).

Para recuperar la eficiencia, consulte el uso del preprocesamiento LESS o SCSS. Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.

Answer 3

¿Qué le parece usar fotogramas clave?

Demostración: jsFiddle

Código:

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