在《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
用js实现的一个进度拖拽效果，常用于调节音量。 该程序代码简单易懂，单页面可多次调用，效果如下图： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…
表格隔行显示不同背景颜色，表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…
CSS实现水平居中 若是行内元素，则直接给其父元素设置text-align: center即可 若是块级元素，则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素，则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…
<!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码，兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…
书写规范请查看《CSS语法及命名规范（入门）》，本文介绍常用类/ID命名规范，CSS文件命名规范，如页面主体：main 内容:content 标签页：tab 章列表：list 信息：msg 标题：title 热点：hot 新闻：news注册：regsiter 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：cop…
学完前几节课，现在只需再花几分钟时间，你就能学会如何制作自己的第一个网站了。 如何做呢？ 通过第一课，我们知道制作一个网页需要有浏览器和记事本程序（或者类似的文本编辑器）。请打开记事本程序（Notepad）：依次选择“开始菜单→程序→附件→记事本”即可。 然后呢？ 我们先从简单的做起吧。先试着做一个显示如下内容的网页：“哇！这是我的第一个网站。 ”继续学习，…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}