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

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

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

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

  • html5专题 网页制作

    22个HTML5的初级技巧

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

    zhrjgy的头像 zhrjgy
    2018年3月18日
    2.8K0
  • 第9课：盒状模型 网页制作

    第9课：盒状模型

    CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构： CSS中的盒状模型 上面的图示看上去可能感觉有点理论化，好吧，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本…

    江山如画的头像 江山如画
    2020年2月25日
    6.9K0
  • CSS 实现水平、垂直居中布局代码大全 网页制作

    CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素，则直接给其父元素设置text-align: center即可 若是块级元素，则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素，则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    江山如画的头像 江山如画
    2019年11月26日
    12.3K0
  • web前端开发 网页制作

    最简单的wmv视频网页播放代码

    如何在网页上播放wmv格式视频？ 1、将以下代码复制到html网页的<body>中：如 <embed src=”wangyesheji1.wmv” width=”460″ height=”414″ autostart=”1″ filename=”mms:/wangyesheji1.wmv” showcontrols=”1″ showstat…

    江山如画的头像 江山如画
    2021年4月5日
    12.5K0
  • Marquee标签实现跑马灯、滚动公告、通知效果 网页制作

    Marquee标签实现跑马灯、滚动公告、通知效果

    1.Marquee基本语法 <marquee> … </marquee> 实例演示：会移动的文字(Marquee) <marquee>啦啦啦，我会移动耶！</marquee> 2.文字移动属性 （1）方向 ：direction=# #=left, right,up,down 例： <marqu…

    江山如画的头像 江山如画
    2019年2月26日
    11.1K0
  • 网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹) 网页制作

    网页设计常见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.6K0

发表回复

登录后才能评论

评论列表（1条）

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

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