在《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
学完前几节课，现在只需再花几分钟时间，你就能学会如何制作自己的第一个网站了。 如何做呢？ 通过第一课，我们知道制作一个网页需要有浏览器和记事本程序（或者类似的文本编辑器）。请打开记事本程序（Notepad）：依次选择“开始菜单→程序→附件→记事本”即可。 然后呢？ 我们先从简单的做起吧。先试着做一个显示如下内容的网页：“哇！这是我的第一个网站。 ”继续学习，…
客户端，PC、平板、手机，各种尺寸，要给电脑PC和手机分别设计不同的网页吗？要给每一个手机分别设计一个网页吗？ 不需要，因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别： 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小，宽度通常在600像素以下，pc…
<!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码，兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…
div+css实现面包屑导航，主要用到了CSS3伪元素before，大家可以通过本利好好理解before的使用方法，下面125建站网给出实现代码。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> &…
一、两个div水平顶部对齐 两个div都设置display:inline-block; 并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…
在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观，如下图。 姓名： 留言： 中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法 在input标签样式中加入css标签vertical-align: middle…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}