在《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
HTML5（简称H5），是超文本标记语言（HTML）的第五次重大修改，是最新一代的超文本标记语言，它不单单是一种标记语言，更为下一代 Web 提供了全新功能 。
这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素，我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说，我们不应该滥用超语义化的元素。不幸的是，nav就是这样一个被滥用的例子。 nav元素的规范描述如下： n…
Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT，分享给大家 ，并且可以播放。 我思考了三种方法： 是在Zoho Docs上操作； 是PPT以图片的形式保存（动画效果没有了），直接轮播； 是自己手写动画+轮播，达到PPT播放效果（用express.js来实现）比较复杂，并且对小白站长不适用。 很自信的要自己手…
到现在，你有没有独立完成过一个网页？你可以的，看看下面的例子： <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 效果图： 效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。 …
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}