在《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
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 效果图： 效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。 …
HTML5（简称H5），是超文本标记语言（HTML）的第五次重大修改，是最新一代的超文本标记语言，它不单单是一种标记语言，更为下一代 Web 提供了全新功能 。
表格隔行显示不同背景颜色，表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…
在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签，并举例给出如何使用。但真正从HTML4转变到HTML5编程，并不是那么简单的事情，很多初学者没有真正了解这些标签，或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…
项目开发：同一个页面，需要在浏览器中浏览是一种样式，而当要打印这个页面时候，又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用： <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…
一、两个div水平顶部对齐 两个div都设置display:inline-block; 并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}