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 相关文章推荐
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 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中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python之pymysql的使用小结
2019/07/01 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
小学生思想品德评语
2014/12/31 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
个人业务学习心得体会
2016/01/25 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers