CSS3 transform:rotate()制作旋转图片

江山如画 • 2019年1月29日下午8:22 • 网页制作 • 阅读 17433

在《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);
}

旋转图片演示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ border: #000 solid 2px; display: block; margin: 50px auto; border-radius: 50%; transition: all 2.0s; } img:hover{ transform: rotate(360deg); } </style> </head> <body> <img src="http://www.125jz.com/wp-content/uploads/member/avatars/238a0b923820dcc5.1528423605.jpg" /> </body> </html>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3224.html

赞 (2)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

网站跳出率过高，从这10个方面留住用户

上一篇 2019年1月28日下午7:59

录制的视频声音和画面不同步如何调整-camtasia教程

下一篇 2019年2月12日下午4:44

CSS border-radius 深入学习（含可视化生成工具）

没有学过CSS border-radius 的同学，请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法： .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角，如下图：只输入一个数值，所有角都会被四舍五入，若要固定值可以使用 …

江山如画
2019年10月17日 • 网页制作
10.4K00
网页制作

第13课：浮动元素（float）

我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理：举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：如何实现这个效果？上例的HTML代码如下所示： <div id=”picture”><…

江山如画
2020年2月25日
2.9K00
网页制作

CSS制作上一页下一页页码显示样式

今天教大家制作页面的上一页下一页页码显示样式，效果如图所示。 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>CSS制作上一页下一页页码显示样式|www.125jz.com</title> <style…

江山如画
2018年7月29日
5.7K01
网页制作

javascript-快速掌握DOM技术

Javascript的组成： 1. js的语法（核心)。 2. DOM(文本对象模型) ：用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML（DHTML）得以实现，可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本)：DOM1，DOM2，DOM3 3. BOM(浏览器模型) BOM是Browser Object Model的…

江山如画
2018年7月17日
4.1K00
网页制作

css布局基础：定位综合练习

主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。整体效果图：效果说明： 1、随着网页向下滚动，当导航到达窗口顶端（t…

孙萍
2020年4月4日
7.9K02
网页制作

6个实例教你学会JavaScript的箭头函数

在看别人JS代码时，经常会看到一些类似下面代码的箭头函数，如果你没有接触过箭头函数，估计要看晕了，这些都是什么东西？今天中国网页设计通过6个实例，教给大家掌握箭头函数的语法及使用。

江山如画
2018年2月17日
8.6K01

发表回复

登录后才能评论

评论列表（1条）

江山如画 2020年1月1日上午9:18

鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}

回复