投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

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

江山如画 • • 网页制作 • 阅读 17918

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

赞 (2)
江山如画的头像江山如画管理团队
0 1 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2019年1月28日 下午7:59
下一篇 2019年2月12日 下午4:44

99%的人还看了以下文章

  • 图片的title和alt属性区别

    图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

    江山如画的头像 江山如画
    网页制作 2020年2月23日
    7.1K0

  • CSS制作三角形原理—超简单

    网页制作中我们经常会需要三角形图标，例如内容展开收起、左右箭头点击切换轮播，点击某条列表数据查看详情等。 三角形图标应用范围广，我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…

    江山如画的头像 江山如画
    2019年11月26日 • 网页制作
    7.4K0

  • CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。介绍了CSS Sprites技术的实现方法，优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手，永哥教你学会css sprite（雪碧图）技术 CSS Sprites的原理：将小图片整合到一张大的图片上，根据具体图…

    江山如画的头像 江山如画
    2019年11月5日 • 网页制作
    8.1K0

  • Zoho Docs-在网页中嵌入PPT的最佳方案（个人版5G免费）

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

    江山如画的头像 江山如画
    2023年1月16日 • 网页制作
    1.7K0
  • 5种 CSS 实现DIV中内容垂直居中的方法 网页制作

    5种 CSS 实现DIV中内容垂直居中的方法

    使用 CSS 实现DIV中内容垂直居中并不容易，有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法，以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div class=…

    江山如画的头像 江山如画
    2018年9月23日
    12.2K0
  • 125建站网百度收录情况 网页制作

    第5课：到目前为止学到了些什么？

    上一课我们已经学习了这些： <html> <head><title></title></head> <body> </body> </html> 网页标题（title）写在head（头部）里：<title>网页标题写在这里</title>。…

    江山如画的头像 江山如画
    2018年1月20日
    6.9K0

发表回复

登录后才能评论

评论列表（1条）

  • 江山如画的头像
    江山如画 2020年1月1日 上午9:18

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