在《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
本课程适合前端开发初级学习者，学习使用html、css和bootstrap技术，实现导航条设计。 预计用时：30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示
屏蔽页面右键，禁止复制，文本选择功能，用jQuery实现非常简单。 125建站网分享两种方法。 方法一： //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…
做项目，有些网页需要打印，很多时候，是导出WORD或EXCEL再打印。 现在需要页面直接打印，方便没有安装OFFICE的用户。 需求：页面在浏览器中浏览是一种样式，要打印这个页面，是另一种样式。 解决方法：用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…
在这一课，你将学习如何在网页之间做超链接。 如何做超链接？ 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子，它是一个指向www.125jz.com的链接： 例1： <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下： 指向…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}