css3动画transform属性系列之scale(缩放)

下面我们从3个方面开始介绍：

1、scale(x,y) 对元素进行缩放

• X表示水平方向缩放的倍数 Y表示垂直方向的缩放倍数

• Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。

1. transform:scale(2,2.5);

2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。

• 默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点

1. transform:scaleX(2);

3、scaleY(<number>) 元素只在Y轴（垂直方向）缩放元素。

• 基点一样在元素的中心位置。可以通过transform-origin来改变基点。

1. transform:scaleY(2);

最后我们看看兼容性写法：

1.  
2. .test{
3. -moz-transform:scale(2,2);
4. -webkit-transform:scale(2,2);
5. -o-transform:scale(2,2);
6. background:url(img/i.png)
   no-repeat;
7. width:198px;
8. height:133px;
9. }

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索元素
， transform
， scale
， 方向
， 垂直
， 缩放动画
css3水平时间轴
css3 transform scale、css3 缩放 scale、css3 scale3d缩放、css3 scale缩放文字、transform scale 动画，以便于您获取更多的相关知识。