css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素,正值表示顺时针方向旋转,负值表示逆时针方向旋转,旋转的中心点为元素的中心。
CSS代码如下:
.rotate{
-ms-transform:rotate(90deg)/* IE 9 */
-moz-transform:rotate(90deg)/* Firefox */
-webkit-transform:rotate(90deg)/* Safari and Chrome */
-o-transform:rotate(90deg)/* Opera */
}
浏览器支持:Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+
1、首先准备一个HTML结构的文档,页面可以制作的简单点。
2、然后在页面的body区域中放置一个img图片。
3、我们先来运行一下页面,你会在页面中看到如下图所示的圆圈。
4、接下来我们就需要对页面进行CSS处理,如下图所示,给img图片添加样式,注意里面有旋转样式。
5、然后实现旋转的设置,这个是CSS3的新功能,主要是对图片进行旋转度数的设置。
6、最后运行程序,你会看到页面中的圆圈在不停的旋转,和我们平常看到的加载中的效果很像。