如何使用CSS以隨機數量旋轉圖像？

我在我的網頁上有20張圖片，我想通過將鼠標懸停在每張圖片上來隨機旋轉（-5到5度）。如果可能的話，我只想使用CSS。如果沒有，我會開放使用JavaScript或jQuery。如何使用CSS以隨機數量旋轉圖像？

我的CSS如下：

.photo:hover { 
    z-index:1; 
    transform:rotate(6deg) scale(1.25); 
    -webkit-transform:rotate(6deg) scale(1.25); 
    -moz-transform:rotate(6deg) scale(1.25); 
    -ms-transform:rotate(6deg) scale(1.25); 
}

6deg應該是一個隨機數，所以每一個用戶將鼠標懸停圖像時，它由-5之間的隨機量旋轉和5.我可以叫JavaScript中的JavaScript函數，甚至是JavaScript變量？這比創建20個不同的CSS ID更好。

我怎樣才能做到這一點？謝謝！

來源

2012-11-22 Joey

不能包括JavaScript中的CSS。只需使用jQuery來改變懸停的程度。 – nhahtdh

你不需要單獨的CSS ID，但是你可以在類上使用一些jQuery。這裏直接使用.each()代替.css()，因爲否則隨機角度會產生一次並用於所有圖像。要懸停individally旋轉：

$('.photo').hover(function() { 
    var a = Math.random() * 10 - 5; 
    $(this).css('transform', 'rotate(' + a + 'deg) scale(1.25)'); 
}, function() { 
    $(this).css('transform', 'none'); 
});

如果你想順利動畫這些轉換，您可以簡單地transform CSS屬性添加到類：

.photo { 
    transition: transform 0.25s linear; 
}

示範：http://jsbin.com/iqoreg/1/edit

來源

2012-11-22 01:44:41

謝謝，這是完美的！我喜歡這樣做，即使在同一個元素上徘徊時，甚至會給你一個不同的旋轉度。 –

等待 - 你沒有使用每一個，對：D？ – Adam

如何使用CSS以隨機數量旋轉圖像？

回答

相關問題