堆疊CSS3轉換函數從多個選擇在樣式表

比方說，我有2倍的DIV：堆疊CSS3轉換函數從多個選擇在樣式表

<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性質代替它們。
我有很多 DIVs，因此在分配它們各自的屬性之前選擇它們並應用它們的公共屬性會更有效率。

參考：jsFiddle

來源

2012-07-31 Daniel W

你能不能簡單地旋轉父元素，如旋轉是常見的所有div之中？ – joshnh 2012-07-31 03:08:21

@joshnh對於這種特定的情況，可以有很多解決方法，但是我的問題歸結爲由CSS屬性引起的效率問題，這些問題可能需要多個功能，每個功能都有不同的功能。如果這些功能被拆分成單獨的屬性，也許會更好...... – 2012-07-31 18:05:32

不幸的是，由於是如何的語法和級聯工作，你將無法描述堆棧轉換。您將有翻譯之前重新聲明旋轉：

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

來源

2012-07-31 02:50:33 BoltClock

你的狀態，「我有很多的DIV，所以它是更有效的將其全部選中，並賦予其各自的屬性之前，應用他們的共同財產。「編碼可能會更有效率，但不幸的是不是結果。唯一的辦法是在一個電話中完成所有事情（因爲BoltClock只是毆打我發佈）。

要重新獲得效率，請查看使用LESS或SCSS預處理。 Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.

來源

2012-07-31 02:52:39 ScottS

如何使用關鍵幀？

演示：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);} 
}

來源

2012-07-31 06:34:48

堆疊CSS3轉換函數從多個選擇在樣式表

回答

相關問題