本篇文章主要給大家介紹css3動畫實現旋轉特效的方法。
css即層疊樣式表，想必學習前端的小伙伴們已經非常熟悉了。那么大家應該都知道，一個炫酷的動畫特效，能使你的網站顯得更加高大上，豐富內容吸引用戶。
下面我們就給大家介紹一個簡單有趣的動畫特效，也就是實現圖片旋轉效果。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3實現旋轉移動動畫特效</title>
<head>
<style>
.main{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
border-radius: 20px;
background: red;
position: relative;
top: 30px;
animation: asd 5s;
}
@keyframes asd {
0 %{transform: rotate(0deg);}
25%{transform: rotate(60deg);left: 0px;}
50%{left:500px;}
75%{transform: rotate(-520deg);}
100%{transform: rotate(0deg);left: 0px;}
}
</style>
</head>
<body>
<div class="main">
動畫
</div>
</body>
</html>
css3中相關重要屬性介紹：
transform ：
transform屬性表示向元素應用 2D 或 3D 轉換，可以對元素進行旋轉、縮放、移動或傾斜。
@keyframes：
通過 @keyframes 規則，您可以創建動畫。也就是說這里的@keyframes只是用於定義動畫，並沒有實際含義。
而css動畫的實現原理，也就是從一個css樣式逐漸變換為另一個css樣式。
其中以百分比（或者"from" 和 "to"）來規定改變發生的時間。（0% 是動畫的開始時間，100% 動畫的結束時間。）
只要大家掌握了css動畫原理，那么想要通過純css做大多數酷炫的效果也是非常容易實現的。
本篇文章就是關於css3動畫實現旋轉移動特效的具體方法介紹，簡單易懂，希望對需要的朋友有所幫助！