स्टैकिंग CSS3 स्टाइलशीट

Question

में एकाधिक चयनकर्ताओं से कार्यों को बदलने चलो कहते हैं कि मैं 2 DIVs करते हैं:

​<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 संपत्ति का उपयोग करें, तो overrid चलती घुमावदार es। क्या एक दूसरे को ओवरराइड करने के बजाय मूल्यों को एकसाथ ढेर करना संभव है?

नोट्स:
मैं जटिल का उपयोग किया जाएगा काम करता है, केवल सरल नहीं अनुवाद को बदलने, तो मैं उन्हें सिर्फ left और top गुणों के साथ स्थानापन्न नहीं कर सकता।
मेरे पास कई DIVs हैं, इसलिए यह उन सभी को चुनने और उनके सामान्य गुणों को लागू करने से पहले, उनके सामान्य गुणों को लागू करने के लिए अधिक कुशल है।

संदर्भ: jsFiddle

Answer 1

दुर्भाग्य से, कैसे वाक्य रचना और झरना काम करते हैं, आप के रूप में वर्णित रूपांतरण ढेर में सक्षम नहीं होगा की वजह से। मैं कई DIVs है

.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

आप राज्य, ", तो यह बहुत अधिक कुशल उनमें से सभी का चयन करें और अपने व्यक्तिगत गुण आवंटित करने से पहले उनके सामान्य गुण लागू होते हैं, करने के लिए है: आप अनुवाद से पहले रोटेशन redeclare करना होगा। " कोडिंग के लिए यह अधिक कुशल हो सकता है, लेकिन दुर्भाग्य से परिणामों के लिए नहीं। एकमात्र तरीका उन सभी को एक ही कॉल में करना है (जैसा बोल्टक्लॉक ने मुझे पोस्ट करने के लिए हराया)।

दक्षता प्राप्त करने के लिए, LESS या SCSS प्रीप्रोसेसिंग का उपयोग करने पर देखें। Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.

Answer 3

कीफ्रेम का उपयोग करने के बारे में कैसे?

डेमो: 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);} 
}