在《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> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…
效果演示 《Marquee标签实现跑马灯、滚动公告、通知效果》 Marquee标签制作滚动公告、新闻列表 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>marquee实现的滚动公告|www.125jz.com</titl…
URL传递参数是程序开发中经常用到的，中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下： //获取URL参数a和b funct…
Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…
《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性，以及视频播放控制技术，如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频，视频？ 在HTML5 中如何嵌入音频？ HTML5 支持 MP3、Wav 和 Ogg 格式的音频，代码示例： <audio controls>…
CSS可以处理高度、宽度、深度三个维度。在前面的课程中，我们已经了解了前两个维度。在本课中，我们将学习如何令不同元素具有层次。简言之，就是关于元素堆叠的次序问题。 为此，你可以为每个元素指定一个数字（z-index）。其原理是：数字较大的元素将叠加在数字较小的元素之上。 比方说，我们正在打扑克，并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}