css怎么讓圖片旋轉

小編給大家分享一下css怎么讓圖片旋轉，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css的三種引入方式

1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內嵌樣式，就是將CSS代碼寫在之間，并且用

進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上

css讓圖片旋轉的方法：首先創建一個HTML示例文件；然后通過img標簽引入圖片；最后通過給img圖片添加transform和animation樣式屬性來實現圖片旋轉效果即可。

本文操作環境：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怎么讓圖片旋轉”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！