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

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

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

在《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 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
网站跳出率过高，从这10个方面留住用户
上一篇 2019年1月28日 下午7:59
录制的视频声音和画面不同步如何调整-camtasia教程
下一篇 2019年2月12日 下午4:44

99%的人还看了以下文章

  • 网页设计常见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日
    8.0K0
  • 第1课：CSS是什么？ 网页制作

    第1课：CSS是什么？

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    江山如画的头像 江山如画
    2020年2月22日
    6.5K0
  • 第6课：超链接 网页制作

    第6课：超链接

    CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。

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

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

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

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

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

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

    江山如画的头像 江山如画
    2021年3月16日
    4.6K0
  • CSS实现段落首字下沉效果的2种方法 网页制作

    CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中，通过设置首字的大小并向左浮动，从而使得首字与其他字符区别；通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    江山如画的头像 江山如画
    2019年4月2日
    15.5K0

发表回复

登录后才能评论

评论列表（1条）

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

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