css怎麼設定元素一直旋轉

css設定元素一直旋轉的方法：先建立一個HTML範例檔案；然後用img引入圖片；最後使用css樣式「transform:rotate(360deg)」設定元素旋轉360度，並透過animation-duration屬性設定動畫時長即可。

本文操作環境：Windows7系統、HTML5&&CSS3版，DELL G3電腦

我們在進行網頁頁面設計時，常常會遇到各種關於圖片展示的問題，例如有的需要讓圖片圓角展示、圖片點擊放大展示等等效果。

主要就來介紹用css3實作圖片自動循環360旋轉的具體方法

css可以使用transform 屬性設定元素進行旋轉、縮放、移動或傾斜。

我們可以使用css樣式transform:rotate(360deg)設定元素旋轉360度。

可以使用animation設定動畫屬性。可以透過animation-duration屬性設定動畫時長。

css3可以透過設定元素css樣式為transform:rotate(360deg)設定元素旋轉角度為360度，然後透過animation-duration屬性設定動畫時長即可實現元素不停旋轉。

範例：

HTML程式碼：

<div class="demo">
<img  class="an img lazy"  src="/static/imghwm/default1.png"  data-src="1.jpg"       style="max-width:90%"  style="max-width:90%"/ alt="css怎麼設定元素一直旋轉" >

css圖片旋轉360度的動畫程式碼範例如下：

.demo{text-align: center;
    margin-top: 100px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 200px;}

效果圖：

#推薦學習：《css影片教學》

以上是css怎麼設定元素一直旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！