在《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
问题： ajax读取留言列表，每条留言后面有个回复按钮，class为“reply”,用$(“.reply”).click(function(){ //do something… })，后面通过ajax加载进来的列表中的回复按钮，点击事件会失效。 解决方法： 最简单的方法就是直接在标签中写onclick=”…
本课程适合前端开发初级学习者，学习使用html、css和bootstrap技术，实现导航条设计。 预计用时：30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 unshift() 实例： <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…
做项目，有些网页需要打印，很多时候，是导出WORD或EXCEL再打印。 现在需要页面直接打印，方便没有安装OFFICE的用户。 需求：页面在浏览器中浏览是一种样式，要打印这个页面，是另一种样式。 解决方法：用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…
实现表格单线边框方法一 border-collapse: collapse; 代码如下： See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线，给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…
主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法： 方法1：通过overflow属性 方法2：通过clear属性 方法3：通过伪元素选择器（推荐） 效果图： 参考： <header> <img …
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}