首頁  >  文章  >  web前端  >  css如何讓圖片旋轉

css如何讓圖片旋轉

藏色散人
藏色散人原創
2021-04-25 09:40:2310446瀏覽

css讓圖片旋轉的方法:先建立一個HTML範例檔案;然後透過img標籤引入圖片;最後透過為img圖片加上transform和animation樣式屬性來實現圖片旋轉效果。

css如何讓圖片旋轉

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

我們可以為img圖片添加了transform和animation樣式屬性來實現圖片旋轉效果。

範例:

HTML程式碼:

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

css程式碼:

.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: 250px;}

我們為img圖片新增了transform和animation樣式屬性,使得圖片實作360度旋轉動畫效果。

css動畫圖片自動旋轉的效果實作方法,也就如上所述。只要掌握了css中的transform和animation屬性就可以實現大多數動畫效果。他們的原理基本上都是大同小異。

transform 屬性向元素套用 2D 或 3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。透過 rotate() 方法,元素順時針旋轉給定的角度。允許負值,元素將逆時針旋轉。

animation屬性是一個簡寫屬性,用於設定六個動畫屬性:

animation-name 規定需要綁定到選擇器的 keyframe 名稱。

animation-duration 規定完成動畫所花費的時間,以秒或毫秒計。

animation-timing-function 規定動畫的速度曲線。

animation-delay 規定在動畫開始之前的延遲。

animation-iteration-count 規定動畫應該播放的次數。

animation-direction 規定是否應該輪流反向播放動畫。

【推薦學習:css影片教學

#

以上是css如何讓圖片旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn