transform的属性scale(x,y) 对元素进行缩放,x表示水平方向缩放倍数，y表示垂直方向的缩放倍数，y是可选参数，不设置，则表示两个方向的倍数是一样的，基点一样在元素的中心位置。

还有单向拉伸的scaleX和scaleY。

  1. <html>
  2. <head>
  3. <title>Demo</title>
  4. <style type="text/css">
  5. .box{width:300px; height:169px;overflow:hidden;}
  6. .suofang{display:block;width:300px; height:169px;transition: all 1s ease 0s;}
  7. .suofang:hover{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-o-transform:scale(2,2);}
  8. </style>
  9. </head>
  10.  
  11. <body><div class="box">
  12. <a href="#" class="suofang" style="background:url(suo.jpg) no-repeat;"></a>
  13. </div>
  14. </body>
  15. </html>

常见的css3缩放效果的更多相关文章

  1. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...

  2. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  5. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  6. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  7. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  8. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  9. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

随机推荐

  1. 【工作总结】LLDB调试技巧 - 篇一

    备忘命令 : 命令“l”可以查看程序当前运行的位置 (lldb) l } - (void)rightBarButtonAction { 命令“bt”也能查看程序运行的调用栈 (lldb) bt * t ...

  2. IOS获取手机设备型号

    最新型号的设备列表https://www.theiphonewiki.com/wiki/Models #import "iosutils/IOSUtils.h" #import & ...

  3. C++设计模式——代理模式

    前言 青春总是那样,逝去了才开始回味:大学生活也是在不经意间就溜走了,现在上班的时候,偶尔还会怀念大学时,大家在一起玩游戏的时光.大学喜欢玩游戏,但是可悲的校园网,速度能把人逼疯了:还好,后来搞了一个 ...

  4. sudo配置临时取得root权限

    系统中的普通用户有时需要root权限执行某种操作,要是使用su - root的话必须要知道root的密码,这是不安全的,所以有了sudo,root可以对/etc/sudoers做一定的配置,让普通用户 ...

  5. “我爱淘”第二冲刺阶段Scrum站立会议1

    完成任务: 完成了webservice的配置与测试,实现了在客户端的搜索功能,并且可以实现图书的发布功能,就是将图书的信息添加到数据库中. 计划任务: 在客户端实现分类功能,通过学院的分类查看书籍. ...

  6. VLC编译问题

    在Ubuntu下编译VLC源代码生成的VLC无法播放Youtube视频(比如https://www.youtube.com/watch?v=mDp-ABzpRX8) 错误提示如下: zlf@ubunt ...

  7. backgroundworker的使用问题

    这几天做项目懒了就用backgroundworker这个控件,觉得它比多线程方便一些,然后这个线程里面在开线程,然后惨剧就发生了:当我打开一个主窗口后,在打开一个子窗口,子窗口里有个backgroun ...

  8. 01.安装Memcached

    1.安装Memcached 1.下载Memcached及其依赖 下载memcached-1.4.24.tar.gz和libevent-2.0.22-stable.tar.gz文件并解压如下: [liz ...

  9. 【BZOJ】【4027】【HEOI2015】兔子与樱花

    贪心 树上贪心问题……跟APIO2015练习赛的C很像啊…… 我的思路是:从叶子向上考虑,令a[x]表示x这个节点上樱花数量与儿子个数的和(即对于任意的x,都有$a[x]\leq m$)每次从儿子的a ...

  10. C++中的RAII机制

    http://www.jellythink.com/archives/101 前言 在写C++设计模式——单例模式的时候,在写到实例销毁时,设计的GC类是很巧妙的,而这一巧妙的设计就是根据当对象的生命 ...