在《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代码时，经常会看到一些类似下面代码的箭头函数，如果你没有接触过箭头函数，估计要看晕了，这些都是什么东西？今天中国网页设计通过6个实例，教给大家掌握箭头函数的语法及使用。
管理系统后台，商品管理、信息管理等，需要删除，为方便操作应该提供全选、反选、取消全选功能。 今天中文网页设计分享jquery实现全选、反选、取消全选功能代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars…
在这一课，你将学习如何在网页之间做超链接。 如何做超链接？ 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子，它是一个指向www.125jz.com的链接： 例1： <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下： 指向…
滚动公告的制作请参阅：Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 注释：当动画完成后，动画的状态会回到初始状…
如何为页面实现理想的布局？ 你可以使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识，可以使用我们提供的CSS教程。因此，请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网…
CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动（参见第13课），你将能够创建多种高级而精确的布局。本课我们将讨论以下内容： CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统： CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}