在《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
创建一个 .html 文件，然后通过如下方式引入 Vue： <!– 开发环境版本，包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者： <!– 生产环境版本，优化了尺寸和速度 –>…
上节课我们讲了html5与html4的区别，Html5对语法进行了简化，一个htm5文档结构代码如下： <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…
本课程适合前端开发初级学习者，学习使用html、css和bootstrap技术，实现导航条设计。 预计用时：30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示
项目开发：同一个页面，需要在浏览器中浏览是一种样式，而当要打印这个页面时候，又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用： <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…
HTML5- Canvas入门（一）画线 上一节课我们学会了 Canvas画线，绘制了一条黑色的直线，但如果我们想要绘制一条红色的或者其它颜色的线段，该怎么做呢？ 答案很简单，使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧： <canvas id=”myCanvas” width=”200″ height=”200″ s…
Loud links-是一款大小只有1.5KB的WEB音效插件，可以实现网页中按钮与图片等元素的触发交互，比如鼠标放上去后出现响声，或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}