在《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、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法： 方法1：通过overflow属性 方法2：通过clear属性 方法3：通过伪元素选择器（推荐） 效果图： 参考： <header> <img …
纯CSS制作红色网站二级下拉导航菜单，代码非常简洁，适合修改后使用，入门就能掌握。 二级下拉导航菜单HTML代码： <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…
在看别人JS代码时，经常会看到一些类似下面代码的箭头函数，如果你没有接触过箭头函数，估计要看晕了，这些都是什么东西？今天中国网页设计通过6个实例，教给大家掌握箭头函数的语法及使用。
这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素，我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说，我们不应该滥用超语义化的元素。不幸的是，nav就是这样一个被滥用的例子。 nav元素的规范描述如下： n…
网页制作中，不管是table还是DIV+CSS排版时，会遇到浏览器中的图片元素img下出现多余空白的问题，非常常见，如何解决？ <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}