在《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
网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。 如文章列表如下： <ul class=’posts’> <li class=’post’> <h3>中国…
网页制作时，需要两个页面之间传值，通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面： <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”>…
文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面，然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…
假如能把自己喜欢的的图像放到网页上，那就太好了。 这貌似有点难度。。。 也许是有点难度，但其实也不难，一个元素就可以搞定： 例1： <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下： 你要做的只是：告诉浏览器你要插入一张图…
一、两个div水平顶部对齐 两个div都设置display:inline-block; 并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…
使用 CSS 实现DIV中内容垂直居中并不容易，有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法，以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div class=…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}