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画一个阴阳八卦图
Mar 09 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php检测文本的编码
2015/07/26 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python数据结构之图的实现方法
2015/07/08 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python实现简单日期工具类
2019/04/24 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
使用python实现对元素的长截图功能
2019/11/14 Python
基于opencv实现简单画板功能
2020/08/02 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
Android面试题及答案
2015/09/04 面试题
捐书寄语赠言
2014/01/18 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
党员剖析材料范文
2014/09/30 职场文书
老员工辞职信范文
2015/05/12 职场文书