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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 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
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
基于vue的验证码组件的示例代码
2019/01/22 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python实现月食效果实例代码
2019/06/18 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
物流经理自我评价
2013/09/23 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
销售总经理岗位职责
2014/03/15 职场文书
安踏广告词改编版
2014/03/21 职场文书
毕业留言寄语大全
2014/04/10 职场文书
供货协议书范本
2014/04/22 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
python实现局部图像放大
2021/11/17 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Python实现简单得递归下降Parser
2022/05/02 Python
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript