在《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
用js实现的一个进度拖拽效果，常用于调节音量。 该程序代码简单易懂，单页面可多次调用，效果如下图： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…
滚动公告的制作请参阅：Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 注释：当动画完成后，动画的状态会回到初始状…
Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…
最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来125建站网为大家介绍HTML给table添加滚动条的方法，有需要的小伙伴可以参考一下： 1、方法分析： 要给table添加滚动条其实很简单，我们首先把table放到一个div里面，然后再设置div显示滚动条即可。 2、html代码： <div…
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图： 效果说明： 1、随着网页向下滚动，当导航到达窗口顶端（t…
默认状态下（输入法为半角状态），按空格键只能输入一个空格，要在文本之间插入多个连续的空格，可以使用以下几种方法： 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下，使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“ ”字符。
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}