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

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

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

在《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%的人还看了以下文章

  • html入门教程 网页制作

    第12课：页面布局（CSS）

    如何为页面实现理想的布局？ 你可以使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识，可以使用我们提供的CSS教程。因此，请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网…

    江山如画的头像 江山如画
    2018年1月19日
    10.1K0
  • 导航特效：jquery实现当前（活动）菜单样式变化 网页制作

    导航特效：jquery实现当前（活动）菜单样式变化

    用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。 当前（活动）菜单样式变化实现原理 在html代码中给首页（默认选中）加上class名cur <a href=…

    江山如画的头像 江山如画
    2018年2月8日
    6.7K0
  • jquery全选和反选功能代码，兼容所有浏览器 网页制作

    jquery全选和反选功能代码，兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码，兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    江山如画的头像 江山如画
    2019年11月1日
    5.1K0
  • label文字与textarea、input垂直居中、顶部对齐的方法 网页制作

    label文字与textarea、input垂直居中、顶部对齐的方法

    在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观，如下图。 姓名： 留言： 中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法 在input标签样式中加入css标签vertical-align: middle…

    江山如画的头像 江山如画
    2018年3月18日
    11.6K0
  • html5专题 网页制作

    跟永哥学HTML5（2）：html5与html4的区别

    我们现在web前端开发的网页，一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑，html 4.0和HTML5有什么区别? hmtl5与html4的区别？ 先来看看HTML5推出的理由： 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。原因：各浏览器规范不统…

    江山如画的头像 江山如画
    2018年1月21日
    4.1K0
  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type) 网页制作

    菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。 如文章列表如下： <ul class=’posts’> <li class=’post’> <h3>中国…

    江山如画的头像 江山如画
    2018年9月27日
    4.0K0

发表回复

登录后才能评论

评论列表（1条）

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

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