css3的transform中scale缩放详解


Posted in HTML / CSS onDecember 08, 2014

下面我们从3个方面开始介绍:

1、scale(x,y) 对元素进行缩放

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
transform:scale(2,2.5); 
 
2、scaleX(<number>) 元素只在X轴(水平方向)缩放元素。
 
默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
transform:scaleX(2); 
 
3、scaleY(<number>) 元素只在Y轴(垂直方向)缩放元素。
 
基点一样在元素的中心位置。可以通过transform-origin来改变基点。
transform:scaleY(2); 

最后我们看看兼容性写法:

复制代码
代码如下:

.test{
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
background:url(img/i.png) no-repeat;
width:198px;
height:133px;
}
HTML / CSS 相关文章推荐
css3教程之倾斜页面
Jan 27 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 #HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 #HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 #HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 #HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 #HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 #HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 #HTML / CSS
You might like
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python中的__slots__示例详解
2017/07/06 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python的log日志功能及设置方法
2019/07/11 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
人力资源管理专业应届生求职信
2014/04/24 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
普通党员整改措施
2014/10/24 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL