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

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

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

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

  • 一句代码给图片加倒影-CSS3 网页制作

    一句代码给图片加倒影-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日
    6.3K0
  • js 网页制作

    注册表单验证常用js代码：用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    江山如画的头像 江山如画
    2021年11月30日
    2.7K0
  • html5专题 网页制作

    22个HTML5的初级技巧

    本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。

    zhrjgy的头像 zhrjgy
    2018年3月18日
    2.9K0
  • 第11课：边框（border） 网页制作

    第11课：边框（border）

    边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等…

    江山如画的头像 江山如画
    2020年2月25日
    5.5K0
  • 第5课：文本 网页制作

    第5课：文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解： text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    江山如画的头像 江山如画
    2020年2月22日
    9.2K0
  • web前端开发 网页制作

    两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事，今天吾爱编程为大家介绍一下iframe自适应高度的方法，有需要的小伙伴可以参考一下： 1、需求分析： 使页面中的iframe可以自适应高度，避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一： 在iframe上面直接加onload的方法，使其自适应 <ifra…

    江山如画的头像 江山如画
    2021年3月16日
    3.7K0

发表回复

登录后才能评论

评论列表（1条）

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

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