在《CSS3 transition transform属性及实例详解》中我们实现了：鼠标放到图片上，图片等比例放大的效果，今天分享transform:rotate()制作旋转图片。
CSS3中的transform:rotate()可以实现旋转功能，可以在CSS里面设定旋转的角度，也可以设定旋转用多少时间来完成。
旋转图片HTML代码
<img src="img/125jz.png" />
CSS代码
img{
border: #000 solid 2px;
display: block;
margin: 50px auto;
border-radius: 50%;
transition: all 2.0s;
}
img:hover{
transform: rotate(360deg);
}
旋转图片演示
Tips:You can change the code before run.
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3224.html
网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。 如文章列表如下： <ul class=’posts’> <li class=’post’> <h3>中国…
CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…
刚接触响应式布局的童鞋会感觉响应式布局很高大上，很难，但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例，手把手教你如何制作响应式网页。 响应式布局（Responsive Layout） 响应式布局分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…
FLV是被众多新一代视频分享网站所采用，是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称，它形成的文件极小、加载速度极快，有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时，插入FLV格式视频的代码（兼容主流浏览器）： <object class id=”clsid:D27CDB6E-AE6D-11cf…
用js实现的一个进度拖拽效果，常用于调节音量。 该程序代码简单易懂，单页面可多次调用，效果如下图： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}