純css製作旋轉圖片
阿新 • • 發佈：2019-01-23
看到一個不錯的網站上製作了一個可以360旋轉的圖片，感覺效果不錯，於是就自己用css製作了一個，效果圖如下：
具體實現程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css製作旋轉圖片</title> <style> .img-circle{ margin: 50px;//只是為了不顯示在邊緣上 font-size: 50px; text-align: center; background-color: #3f9fdb; width: 170px; height: 170px; line-height: 140px; border: 15px solid #f0f0f0; color: #fff; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } .img-circle:hover{ background-color: #0071b8; border: 15px solid #c9dfec; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } </style> </head> <body> <div class="img-circle">旋轉</div> </body> </html>
接下來進行程式碼的解釋：
1）在樣式表中，大家可以看到下面三行的程式碼，transition是一個過渡屬性，建立過程為：在預設樣式中宣告元素的初始狀態樣式；宣告過渡元素的最終樣式；在初始狀態樣式中新增過渡函式。
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;transition-property 指定過渡或動態模擬的CSS屬性 transition-duration 指定完成過渡所需要的時間 transition-timing-function 指定過渡函式 transition-delay 指定過渡開始出現的延遲時間
transition-delay屬性用來定義延遲時間，也就是說改變元素屬性值之後多長時間開始執行過渡效果，預設為0。其取值：<time>為數值，單位為s（秒）或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用於所有元素，包括:before和:after偽元素。
trabsition-timing-function屬性指定某種指代過渡的”緩動函式“。可以將屬性值設定為單一過渡函式、三次貝塞爾曲線和階梯函式。其中的ease-out為單一過渡函式，其他的單一過渡屬性有：
2）在樣式表中，大家可以看到下面三行的程式碼，transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。1、ease：（逐漸變慢）預設值，ease函式等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0). 2、linear：（勻速），linear 函式等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函式等同於貝塞爾曲線(0.42, 0, 1.0, 1.0). 4、ease-out：（減速），ease-out 函式等同於貝塞爾曲線(0, 0, 0.58, 1.0). 5、ease-in-out：（加速然後減速），ease-in-out 函式等同於貝塞爾曲線(0.42, 0, 0.58, 1.0) 6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
本文中用到了rotate()方法，即進行2D旋轉。
值得注意的是，並不是所有的瀏覽器都支援這個屬性，Internet Explorer 10、Firefox、Opera 支援 transform 屬性。Internet Explorer 9 支援替代的
-ms-transform 屬性（僅適用於 2D 轉換）。Safari 和 Chrome 支援替代的 -webkit-transform 屬性（3D 和 2D 轉換）。Opera 只支援 2D 轉換。所以，我在程式碼中寫了3行，即是為了解決瀏覽器的相容性。