我们制作旋转动画，如果旋转的元素是图案，怎样旋转都可以，无须多虑，好看就好。而要是人物、动物或建筑物，让他们不停地翻跟斗就不妥了。因此，在旋转动画中，上述元素是不宜自转的。请看下图效果。
代码：
＜div align="center"＞
＜style type="text/css"＞.背景图{
border-radius: 50%;
background-
image:url(http://img1.oldkids.cn/upload/260811000/u260810070/2015/11/19/
blog_20151119095423533407.gif);
width: 470px;
height: 470px;
}
.转环及旋转图{
width: 470px;
height: 470px;
box-shadow: 0px 0px 0px 15px rgba(150,130,0,1);
border-radius: 50%;
transform-origin: 50% ;
animation: linear mymove 10s infinite;
}
@keyframes mymove{
from {transform:rotate(0deg);}
to {transform:rotate(-360deg);}
}
img:nth-child(1){ position: absolute; top: 0px; left: 180px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(2){ position: absolute; top: 60px; left: 300px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(3){ position: absolute; top: 180px; left: 360px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(4){ position: absolute; top: 300px; left: 300px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(5){ position: absolute; top: 360px; left: 180px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(6){ position: absolute; top: 300px; left: 60px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(7){ position: absolute; top: 180px; left: 0px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(8){ position: absolute; top: 60px; left: 60px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(9){ position: absolute; top: 180px; left: 180px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
@keyframes re-rotate{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
＜/style＞
＜div class="背景图"＞
＜div class="转环及旋转图"＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="https://www.oldkids.cn/upload/2018/03/06/blog_20180306215430689.png" /＞＜/div＞ ＜/div＞
＜/div＞
代码解析：
我的头像和鸽子都不翻转，其措施是设置两个旋转方向相反的旋转属性。一个是 transform: rotate(360deg) ，另一个是transform: rotate(-360deg)。
再看下面一图，与上图无大区别，只是让背景图慢速旋转了，中间放了一个动画（此图不再另附代码）。
| 
