CSS轉換不能在CSS轉換工作？

我真的很希望我在這裏錯過了一些簡單的東西，因爲這讓我瘋狂。CSS轉換不能在CSS轉換工作？

我想要元素rotateZ（360deg）當類應用，然後返回時，類被刪除。出於某種原因，沒有任何轉換正在發生。有任何想法嗎？

CSS

#img-cover { 
    content: url(../img/menu-center-plus.svg); 
    border-radius: 66px; 
    position:absolute; 
    left:95px; 
    top:95px; 
    z-index: 1500; 
    display:block; 
    -webkit-transition: box-shadow 0.5s, opacity 1.2s, -webkit-transform 1s; 
    -webkit-box-shadow: 0px 0px 2px 1px rgba(55, 55, 55, 0.6); 
    -webkit-transform: rotateZ(-360deg); 
    opacity: 0; 
} 

.twirlIn { 
    -webkit-transition: opacity 1s, -webkit-transform 1s; 
    opacity: 1!important; 
    -webkit-transform: rotateZ(360deg); 
}

來源

2013-11-14 okeegan

你可以擺弄你的帖子！ [jsfiddle.net]（http://jsfiddle.net） –

@Vivek Vikranth它看起來有點粗俗的背景下，但這裏是： [http://jsfiddle.net/5Knku/1](jsFiddle）點擊左上角的貓，然後點擊紅貓將其重新放回。培根是一個應該旋轉的培根。 – okeegan

這是一個有點古怪的一個，但如果你改變了CSS來

#img-cover.twirlIn { ...

它工作正常！

來源

2013-11-14 10:26:31 graham

這是因爲您正在覆蓋#img-cover {}的轉換。另外，由於類在第二次進行動畫處理時被刪除，所以變換轉換也會被刪除（在這種情況下，儘管它已被覆蓋，但並不重要）。

將轉換添加到您的#img-cover，因爲這樣可以解決問題。

#img-cover{ 
    -webkit-transition: box-shadow 0.5s, opacity 2s, -webkit-transform 1s; 
}

Fiddle

來源

2013-11-14 10:56:00

CSS轉換不能在CSS轉換工作？

回答

相關問題