在《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 border-radius 的同学，请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法： .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角，如下图： 只输入一个数值，所有角都会被四舍五入，若要固定值可以使用 …
客户端，PC、平板、手机，各种尺寸，要给电脑PC和手机分别设计不同的网页吗？要给每一个手机分别设计一个网页吗？ 不需要，因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别： 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小，宽度通常在600像素以下，pc…
网页制作中我们经常会需要三角形图标，例如内容展开收起、左右箭头点击切换轮播，点击某条列表数据查看详情等。 三角形图标应用范围广，我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…
这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素，我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说，我们不应该滥用超语义化的元素。不幸的是，nav就是这样一个被滥用的例子。 nav元素的规范描述如下： n…
v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…
正则表达式，用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具，你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则，4到…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}