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 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
详解盒子端CSS动画性能提升
May 24 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中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
python os用法总结
2018/06/08 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python如何输出整数
2020/06/07 Python
Python json格式化打印实现过程解析
2020/07/21 Python
python 如何调用远程接口
2020/09/11 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
数据库笔试题
2013/05/09 面试题
创业计划实施的7大步骤
2014/02/05 职场文书
爱国口号
2014/06/19 职场文书
研究生导师评语
2014/12/31 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
实例详解Python的进程,线程和协程
2022/03/13 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers