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

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

在《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

网页制作

一句代码给图片加倒影-CSS3

本文使用纯CSS代码给图片加倒影，CSS代码： img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示：完整代码： &lt…

江山如画
2019年8月18日
5.7K00
网页制作

纯CSS制作热门文章排行，且前3名背景不同

要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。 htm…

江山如画
2018年7月14日
3.9K00
网页制作

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

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

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

网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果，今天分享给大家！ <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=n…

江山如画
2022年5月9日
6.3K01
网页制作

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

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

孙萍
2020年4月4日
7.1K02
Zoho Docs-在网页中嵌入PPT的最佳方案（个人版5G免费）

Zoho WorkDrive – 全面的在线共享文档工具在125建站网上想嵌入PPT，分享给大家，并且可以播放。我思考了三种方法：是在Zoho Docs上操作；是PPT以图片的形式保存（动画效果没有了），直接轮播；是自己手写动画+轮播，达到PPT播放效果（用express.js来实现）比较复杂，并且对小白站长不适用。很自信的要自己手…

江山如画
2023年1月16日 • 网页制作
1.5K00

发表回复

登录后才能评论

评论列表（1条）

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

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

回复