在《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
文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面，然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…
管理系统后台，商品管理、信息管理等，需要删除，为方便操作应该提供全选、反选、取消全选功能。 今天中文网页设计分享jquery实现全选、反选、取消全选功能代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars…
正则表达式，用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具，你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则，4到…
会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦，我会移动耶！ </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…
本文是js验证表单输入的入门级教程，要求你会基础的HTML，JS知识。 页面HTML 表单代码： <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…
css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。 css sprite优点： 有效减少网站的http请求数量，加…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}