在《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验证表单输入的入门级教程，要求你会基础的HTML，JS知识。 页面HTML 表单代码： <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…
制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。 上中下结构，中间又分为两列的全屏自适应布局HTML代码： <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…
HTML5- Canvas入门（一）画线 上一节课我们学会了 Canvas画线，绘制了一条黑色的直线，但如果我们想要绘制一条红色的或者其它颜色的线段，该怎么做呢？ 答案很简单，使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧： <canvas id=”myCanvas” width=”200″ height=”200″ s…
HTML是什么？ HTML是一门语言，它令我们可以在因特网上展示信息。你所看到的网页，是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码，只需在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。 对于生手来说，HTML代码看似很复杂，不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么？ 如果你要制作网站的话，学习HTML是不可避免的。即…
使用 CSS 实现DIV中内容垂直居中并不容易，有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法，以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div class=…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}