css3 rotate360度自转

最新推荐文章于 2024-09-04 09:48:42 发布

张云，

最新推荐文章于 2024-09-04 09:48:42 发布

阅读量707

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/buzhidjiaosha/article/details/127083339

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

rotateX()沿 X 轴的 3D 旋转。
rotateY()沿 Y 轴的 3D 旋转。
rotateZ()沿 Z 轴的 3D 旋转。
rotate()方法是根据给定的角度顺时针或逆时针旋转元素。
当rotate()中的值为正值时，顺时针旋转。
当rotate()中的值为负值时，逆时针旋转。

以上为凑字数忽略即可…

div{
	width:300px;
	height:300px;
	background:#ff0000;
	animation:fadenum 7s 0s linear infinite;
	-webkit-animation:fadenum 7s 0s linear infinite;
}
//定义动画
@keyframes fadenum{
	0% {
		transform:rotate(0deg);
		-ms-transform:rotate(0deg);  /* IE 9 */
		-moz-transform:rotate(0deg);  /* Firefox */
		-webkit-transform:rotate(0deg);  /* Safari and Chrome */
		-o-transform:rotate(0deg);  /* Opera */
	  }
	100%{
		transform:rotate(360deg);
		-ms-transform:rotate(360deg);  /* IE 9 */
		-moz-transform:rotate(360deg);  /* Firefox */
		-webkit-transform:rotate(360deg);  /* Safari and Chrome */
		-o-transform:rotate(360deg);  /* Opera */
	}
  }