在css3中，可以使用animation屬性和「@keyframes」規則來為圖片添加旋轉動畫來讓圖片旋轉起來。實作步驟：1、使用「@keyframes 動畫名稱{50% {transform: rotate(旋轉角度);}」語句建立旋轉動畫；2、使用「圖片元素{animation:動畫名稱時間infinite;}」語句將旋轉動畫應用於指定圖片元素中即可。
本教學操作環境：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" style="max-width:90%" / alt="css3怎麼讓一張圖片旋轉" >
</body>
</html>
#說明：animation（動畫）屬性
| #值 | |
| animation | 一個簡寫屬性。 |
| animation-name | 指定要綁定到選擇器的關鍵影格的名稱 |
| animation-duration | 動畫指定需要多少秒或毫秒完成 |
| animation-timing-function | 設定動畫將如何完成一個週期 |
| animation-delay | |
| # animation-iteration-count |
以上是css3怎麼讓一張圖片旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！
