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 Backgrounds属性相关介绍
May 11 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 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
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python读取Kafka实例
2019/12/23 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
水产养殖学应届生求职信
2013/09/29 职场文书
四个太阳教学反思
2014/02/01 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
暑期培训班策划方案
2014/08/26 职场文书
标准单位租车协议书
2014/09/23 职场文书
地震捐款简报
2015/07/21 职场文书
高中体育课教学反思
2016/02/16 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
公司年会主持词范文!
2019/05/07 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL
数据设计之权限的实现
2022/08/05 MySQL