html让图片中心旋转,使用CSS让图片旋转起来

在给 程序员 的设计学习指南上看到一个图标在不停的旋转，觉得很好玩。于是在好奇心的驱使下，整理出网页中使用.css文件。照葫芦画瓢的弄出大概的效果。

使用CSS实现图片的旋转，有三部分组成：1个HTML文件(Index.html)、1个CSS文件(spin.css)和几张图片。

首先，spin.css文件

.fa{

display:inline-block;

font:normal normal normal 14px/1 FontAwesome;

font-size:inherit;

text-rendering:auto;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale

}

.fa-spin{

-webkit-animation:fa-spin 2s infinite linear;

animation:fa-spin 2s infinite linear

}

@-webkit-keyframes fa-spin{

0%{

-webkit-transform:rotate(0deg);

transform:rotate(0deg)

}

100%{

-webkit-transform:rotate(359deg);

transform:rotate(359deg)

}

}

@keyframes fa-spin{

0%{

-webkit-transform:rotate(0deg);

transform:rotate(0deg)

}

100%{

-webkit-transform:rotate(359deg);

transform:rotate(359deg)

}

}

.fa-rotate-90{

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

-webkit-transform:rotate(90deg);

-ms-transform:rotate(90deg);

transform:rotate(90deg)

}

.fa-rotate-180{

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

-webkit-transform:rotate(180deg);

-ms-transform:rotate(180deg);

transform:rotate(180deg)

}

.fa-rotate-270{

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

-webkit-transform:rotate(270deg);

-ms-transform:rotate(270deg);

transform:rotate(270deg)

}

接下来是index.html文件

最后是张图片