在《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
表格还有哪些相关属性？ colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span（跨列）”的缩写。colspan属性用在<td>标签中，用来指定单元格横向跨越的列数： 例1： <table border=”1″> <tr><td colspan=”3″>单元格1<…
客户端，PC、平板、手机，各种尺寸，要给电脑PC和手机分别设计不同的网页吗？要给每一个手机分别设计一个网页吗？ 不需要，因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别： 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小，宽度通常在600像素以下，pc…
项目开发：同一个页面，需要在浏览器中浏览是一种样式，而当要打印这个页面时候，又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用： <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…
制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。 上中下结构，中间又分为两列的全屏自适应布局HTML代码： <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…
在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签，并举例给出如何使用。但真正从HTML4转变到HTML5编程，并不是那么简单的事情，很多初学者没有真正了解这些标签，或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…
css多栏自适应布局一般使用position属性布局，或者用float属性布局，也可以使用display属性。 position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。 相关阅读：左侧固定，右侧自适应布局的两种实现方法 1、浮动实现 原理：左侧定宽浮动，右侧使用margin-left，且不要定宽，容器尺寸…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}