在《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
本文使用纯CSS代码给图片加倒影，CSS代码 ： img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示： 完整代码： <…
<script language=”javascript”> //验证是否为数字 function IsDigit(cCheck) { return ((‘0′<=cCheck) && (cCheck<=’9’)); } //验证是否为英文字母 fun…
FLV是被众多新一代视频分享网站所采用，是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称，它形成的文件极小、加载速度极快，有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时，插入FLV格式视频的代码（兼容主流浏览器）： <object class id=”clsid:D27CDB6E-AE6D-11cf…
到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度，即在水平方向上的尺寸。 下面是一个简单的例子，它为我们提供了一个可以容纳文本的盒子： div.box {width: 200px;bord…
最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来125建站网为大家介绍HTML给table添加滚动条的方法，有需要的小伙伴可以参考一下： 1、方法分析： 要给table添加滚动条其实很简单，我们首先把table放到一个div里面，然后再设置div显示滚动条即可。 2、html代码： <div…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}