在《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
制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。 上中下结构，中间又分为两列的全屏自适应布局HTML代码： <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…
tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件，而且会越来越大。dede模板缓存可以加快网页文件的生成速度，关闭的话，理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。
本节课我们学习HTML的重要成分——元素（element）。元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。 “标签”是什么？ 标签（tag）指示元素的起始与结束，所有标签都由“<”及“＞”所围住，如<html>。一般标签成对出现，首标…
美观简洁的bootstrap 表单验证代码，如上图所示，点击登录按钮，在输入框下方显示错误提示信息 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>ipput</title> <!– 新 Bootstra…
正则表达式，用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具，你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则，4到…
我们现在web前端开发的网页，一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑，html 4.0和HTML5有什么区别? hmtl5与html4的区别？ 先来看看HTML5推出的理由： 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。原因：各浏览器规范不统…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}