本文所分享的知识点是【css3的transform中scale缩放详解】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
css3的transform中scale缩放详解
下面我们从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;
}
关于css3的transform中scale缩放详解的相关讨论如下：
相关问题：css3中transition 过渡效果如何只对transform:scal...
答： transition-property:width; 设定这个值以后，只有宽度会有过渡效果，用来对比的高度则不会有过渡，控制scale也是一样，transition-property:transform 就行 >>详细
相关问题：CGAffineTransformScale 究竟缩放多少
答：这种缩放的问题， 很容易解决 直接输 入：RE——回车， 即可任意缩放 RE重新生成命令 在CAD作图时很常用 >>详细
相关问题：CSS3中的transform 属性是会后面设定的覆盖前面的？
答：transform:rotate(45deg) translate(500px,0); 这样写是同时应用多个(中间加个空格分开) 如果分开写，后面的会覆盖前面的 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-