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

还有单向拉伸的scaleX和scaleY。

<html>

<head>

<title>Demo</title>

<style type="text/css">

.box{width:300px; height:169px;overflow:hidden;}

.suofang{display:block;width:300px; height:169px;transition: all 1s ease 0s;}

.suofang:hover{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-o-transform:scale(2,2);}

</style>

</head>

<body><div class="box">

<a href="#" class="suofang" style="background:url(suo.jpg) no-repeat;"></a>

</div>

</body>

</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. why does angular js rock

    angularjs 入门教程 http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/ Practive the previ ...

  2. @synthesize 有什么好处？

    如果不用 synthesize,操作的是 @property中定义的变量,使用synthesize之后,间接的操作了一个新的成员变量,到底有什么好处?直接只用一个@property不是更简单吗?

  3. 22、DDMS（转载）

    本文是转载,出处为http://www.xuebuyuan.com/1291595.html 如需删除本文,请私信我,谢谢 DDMS DDMS是一款Google* 提供的应用,可作为独立的工具运行,也 ...

  4. bzoj 2743 树状数组离线查询

    我们按照询问的右端点排序,然后对于每一个位置,记录同颜色 上一个出现的位置,每次将上上位置出现的+1,上次出现的-1,然后 用树状数组维护就好了 /************************** ...

  5. 用U盘作为启动盘，安装Yosemite

    1.选择一个存贮空间大于Yosemite系统(Yosemite系统大概5.1G左右)的U盘,用磁盘工具(Disk Utility)对此磁盘进行分区,可以参照此链接处对U盘进行分区.如果用磁盘工具进行分 ...

  6. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  7. Ckeditor注册事件

    这段时间使用js+cookies进行自动草稿保存,个人觉的,这些全在客户端处理比较的好,所以没有使用AJAX+数据库的自动草稿保存方法. 结果出现Ckeditor无法绑定onkeyup,onselec ...

  8. Sqli-labs less 21

    Less-21 本关对cookie进行了base64的处理,其他的处理流程和less20是一样的. 我们这里可以利用less20同样的方法,但是需要将payload进行base64编码处理(注意这里对 ...

  9. sql盲注及其相关方法

    Sql注入过程数据(后台数据不能回显到页面)不回显采用方法 1:构造逻辑判断 ▲left(database(),1)>’s’             //left()函数 ▲and ascii( ...

  10. 去“IOE”

    所谓去“IOE”,是对去“IBM.Oracle.EMC”的简称,三者均为海外IT巨头,其中IBM代表硬件以及整体解决方案服务商,Oracle代表数据库,EMC代表数据存储.去“IOE”策略更广泛的理解 ...