css3怎麼讓一張圖片旋轉

在css3中，可以使用animation屬性和「@keyframes」規則給圖片新增旋轉動畫來讓圖片旋轉起來。實現步驟：1、使用「@keyframes 動畫名稱 {50% {transform: rotate(旋轉角度);}」語句建立旋轉動畫；2、使用「圖片元素{animation:動畫名稱時間 infinite;}」語句將旋轉動畫應用於指定圖片元素中即可。

如何快速入門VUE3.0：進入學習

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css3中，可以使用animation屬性和「@keyframes」規則給圖片新增旋轉動畫來讓圖片旋轉起來

@keyframes是CSS3的一種規則，可以用來定義CSS動畫的一個週期的行為，可以建立簡單的動畫。
animation（動畫）屬性用於將動畫應用於指定元素；使用不同的CSS animation屬性，可以控制動畫的許多不同方面，包括動畫迭代的次數，是否在開始和結束值之間交替，以及動畫是否應該執行或暫停。動畫也可以延遲其開始時間。

語法：

/* 定義動畫*/
@keyframes 動畫名稱{
    /* 樣式規則*/
}

/* 將它應用於元素 */
.element {
    animation-name: 動畫名稱（在@keyframes中已經宣告好的）;
    /* 或使用動畫簡寫屬性*/
    animation: 動畫名稱 1s ...
}

想要定義旋轉動畫，需要使用transform屬性；在「@keyframes」規則中使用transform: rotate(旋轉角度)控制旋轉動作即可。

實現程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}
			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" width="200" />
	</body>
</html>

說明：animation（動畫）屬性

值	說明
animation	一個簡寫屬性。
animation-name	指定要繫結到選擇器的關鍵幀的名稱
animation-duration	動畫指定需要多少秒或毫秒完成
animation-timing-function	設定動畫將如何完成一個週期
animation-delay	設定動畫在啟動前的延遲間隔。
animation-iteration-count	定義動畫的播放次數。
animation-direction	指定是否應該輪流反向播放動畫。
animation-fill-mode	規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
animation-play-state	指定動畫是否正在執行或已暫停。

（學習視訊分享：）

以上就是css3怎麼讓一張圖片旋轉的詳細內容，更多請關注TW511.COM其它相關文章！