Stacking CSS3 trasformare funzioni da più selettori di foglio di stile

Diciamo che ho 2 DIV:Stacking CSS3 trasformare funzioni da più selettori di foglio di stile

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

voglio ruotare entrambi:

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

E poi voglio spostare in modo indipendente:

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

il problema è che sia la rotazione e lo spostamento utilizzare la proprietà transform, in modo che il movimento overrid è la rotazione. È possibile raggruppare i valori insieme anziché sovrascrivere l'un l'altro?

Note:
Userò complesso trasformare funzioni, traduzioni non solo semplici, quindi non li può sostituire con solo left e top proprietà.
Ho molti DIV, quindi è molto più efficiente selezionarli tutti e applicare le loro proprietà comuni, prima di assegnare le loro proprietà individuali.

Riferimento: jsFiddle

fonte

2012-07-31 Daniel W

Potrebbe non semplicemente ruotare l'elemento padre, come la rotazione è comune tra tutti i div? – joshnh

@joshnh Ci possono essere molte soluzioni alternative a questa situazione specifica, ma la mia domanda si riduce ai problemi di efficienza causati dalle proprietà CSS che possono assumere più funzioni che ognuna di esse fa qualcosa di diverso. Forse potrebbe essere meglio se queste funzioni fossero divise in proprietà separate ... –

Purtroppo, a causa di come la sintassi e il lavoro a cascata, non sarà in grado di impilare trasforma come descritto. Si dovrà ridichiarare le rotazioni prima che le traduzioni:

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

fonte

2012-07-31 02:50:33 BoltClock

È stato, "Ho molti DIV, quindi è molto più efficiente per selezionare tutti loro e applicare le loro proprietà comuni, prima di assegnare loro proprietà individuali. " Potrebbe essere più efficiente per te la codifica, ma sfortunatamente non per i risultati. L'unico modo è di farli tutti in una sola chiamata (come BoltClock mi ha appena battuto per postare).

Per riacquistare efficienza, esaminare utilizzando il preprocessing LESS o SCSS. Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.

fonte

2012-07-31 02:52:39 ScottS

Come utilizzare i fotogrammi chiave?

Demo: jsFiddle

Codice:

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

fonte

2012-07-31 06:34:48

Stacking CSS3 trasformare funzioni da più selettori di foglio di stile

risposta

Problemi correlati