背景圖像上的CSS3轉換

我想做一個CSS3轉換：rotate（360deg）;在過渡1s; 在背景圖像而不是一個單獨的圖像（元素）.. 這可能嗎？我已經從谷歌中搜尋出來，但沒有成功！我想實現是一樣的東西：背景圖像上的CSS3轉換

#footerLogo { 
    background: url('ster.png'), 
    -moz-transition: -moz-transform 1s, 
    transition: transform 1s, 
    -o-transition: -o-transform 1s, 
    -webkit-transition: -webkit-transform 1s; 
    background-position: #outlinedtotheleft; 
} 
#footerLogo:hover { 
    background: transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
}

我希望這是可能的！我知道這是很容易可行的JS（jQuery的）有：

$('#something').hover(function(){morecodehere});

...但我想知道是否有可能只用CSS（3）

HTML：

<div id="footerLogo"> 
    <img src="carenza.png"/> 
</div>

來源

2011-09-05 Dominique

下次添加代碼塊時，只需將整個塊縮進4以上的空格以保留縮進。使用反引號進行內聯代碼。 – numbers1311407

當然，你可以嘗試這樣的事：

HTML

<div id="planet"> 
</div>

CSS

#planet { 
    width:200px; 
    height:200px; 
    background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center; 
} 

#planet { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration:2s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
    -moz-animation-name: rotate; 
    -moz-animation-duration:2s; 
    -moz-animation-iteration-count:infinite; 
    -moz-animation-timing-function:linear; 
} 

@-webkit-keyframes rotate { 
    from {-webkit-transform:rotate(0deg);} 
    to { -webkit-transform:rotate(360deg);} 
} 

@-moz-keyframes rotate { 
    from {-moz-transform:rotate(0deg);} 
    to { -moz-transform:rotate(360deg);} 
}

JSFiddle

來源

2011-09-05 16:02:07

，但它只需要在鼠標懸停上轉換，div包含另一個IMG。想像;你有一個小星形圖像（單獨的，但是原始標誌的一部分）和其他標誌（「某個名稱」）的旁邊。如果我將鼠標懸停在div（兩個圖像之一）上，那麼只有星星旋轉。只有CSS3 .. 儘管如此，仍然不錯的例子:-)！ – Dominique

@Dominique是否這樣？ http://jsfiddle.net/andresilich/YqdJb/2/ –

是的！謝謝！ – Dominique

我不認爲你可以將變換應用到背景圖像本身（與div分開）。但是，您可以旋轉整個div，包括使用過渡將其設置爲動畫效果（here's a working example。）

如果你能描述你想達到的確切效果，這可能會有幫助嗎？

代碼：

#footerlogo { 
    width: 200px; 
    height: 200px; 
    background-image: url(http://lorempixum.com/200/200); 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    transition: transform 1s; 
} 

#footerlogo:hover { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    transform: rotate(360deg); 
}

來源

2011-09-05 15:26:00

前綴固定的CSS聲明應該永遠是最後的！你希望一旦準備好就使用標準實現，而不是用特定的瀏覽器覆蓋它可能會被破壞的東西。 – gondo

@gondo 2011年，我懷疑有人在想，遙遙領先:)我會改變順序。幾乎是 –

背景圖像上的CSS3轉換

回答

相關問題