在《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);
}
旋转图片演示
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3224.html
默认状态下（输入法为半角状态），按空格键只能输入一个空格，要在文本之间插入多个连续的空格，可以使用以下几种方法： 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下，使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“ ”字符。
tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件，而且会越来越大。dede模板缓存可以加快网页文件的生成速度，关闭的话，理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。
实现表格单线边框方法一 border-collapse: collapse; 代码如下： See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线，给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…
微信扫一扫 
支付宝扫一扫
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}