文档章节

CSS3(360度旋转、旋转放大、放大、移动)

m
 mailan1
发布于 2015/09/01 17:00
字数 218
阅读 34
收藏 0
  1. 效果一:360°旋转 修改rotate(旋转度数)

    * { transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}*:hover {    transform:rotate(360deg);    -webkit-transform:rotate(360deg);    -moz-transform:rotate(360deg);    -o-transform:rotate(360deg);    -ms-transform:rotate(360deg);}

  2. 2

    效果二:放大 修改scale(放大的值)

    * {    transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}*:hover {    transform:scale(1.2);    -webkit-transform:scale(1.2);    -moz-transform:scale(1.2);    -o-transform:scale(1.2);    -ms-transform:scale(1.2);}

  3. 3

    效果三:旋转放大 修改rotate(旋转度数) scale(放大值)

    * {    transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}*:hover {    transform:rotate(360deg) scale(1.2);    -webkit-transform:rotate(360deg) scale(1.2);    -moz-transform:rotate(360deg) scale(1.2);    -o-transform:rotate(360deg) scale(1.2);    -ms-transform:rotate(360deg) scale(1.2);}

  4. 4

    效果四:上下左右移动 修改translate(x轴,y轴)

    * {    transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}*:hover {    transform:translate(0,-10px);    -webkit-transform:translate(0,-10px);    -moz-transform:translate(0,-10px);    -o-transform:translate(0,-10px);    -ms-transform:translate(0,-10px);}


本文转载自:http://jingyan.baidu.com/article/6181c3e06f6402152ef1531c.html

m
粉丝 0
博文 2
码字总数 1173
作品 0
佛山
私信 提问
CSS3详解:transform

近来,HTML5和CSS3的发展速度还是很可观的,国内外不乏一些大站,酷站都在使用最新的技术。面对新的技术,我们该如何正确的把握和使用到今后的项目实战中呢?针对这一问题,浩子决定剖析CSS...

gutaotao1989
2017/08/24
0
0
SimpleCrop 支持任意角度旋转的图片裁剪组件

简介 :github.com/newbieYoung… 是一个在功能和交互上参考 IOS 系统的原生图片裁剪功能并支持任意角度旋转的 Web 图片裁剪组件; 左侧是 IOS 系统相册中原生的图片裁剪功能,右侧为 Simple...

NewbieYoung
05/01
0
0
7个免费的 jQuery 图片360度旋转插件

如果你有一个需要产品展示的网站,那么接下来给你分享的这几个jQuery图片360度旋转展示插件将会帮助你完成一些不可思议的效果,它能很好地让用户从多个视角浏览你的产品,用户只需拖动鼠标,...

yykj
2012/11/12
18K
11
不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果

CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是路径变形动画,超过3D,而位移、轨迹、旋转、缩放、斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些...

泱泱
2017/11/24
0
0
Transform 的简单理解

canvas里面的transfrom与css3中的基本是一样的,唯一的不同是原点,canvas的默认原点是图形的左上角,css3是图形的中心, translate(x,y)方法 是用来移动canvas和它的原点到一个不同的位置,...

tianyawhl
2018/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
3
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
6
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
4
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部