在《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
一．概念 flex布局： Flex Box 的缩写，意味“灵活的盒子”或“弹性盒子”，所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素，成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员，称为flex项目。 <div style=“ display:flex;”> &l…
中国省、市区二级联动下拉选择框，包含所有省份及市县信息。 当选择省份下拉选择框时，市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”，市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里（js/common.js），中国网页设计在js文件里定义了两个数组，分别存放省份和对应的市区。 //省份 var pr…
滚动公告的制作请参阅：Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 注释：当动画完成后，动画的状态会回到初始状…
css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。 css sprite优点： 有效减少网站的http请求数量，加…
CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…
CSS3可以实现很多漂亮的图形，本文从互联网收集了最常见的40种形状和图形，现分享给大家。 包括圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}