css3的transform中scale缩放详解
程序员文章站
2022-03-01 12:42:32
这篇文章主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下... 14-12-08...
下面我们从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 中的新特性加强记忆详解
-
CSS3中的变形处理——transform功能(旋转、缩放、倾斜、移动)
-
2D变形CSS3 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)
-
详解CSS3中使用gradient实现渐变效果的方法
-
详解CSS3中@media的实际使用
-
CSS3中Animation属性的使用详解
-
css3中2D转换之有趣的transform形变效果
-
CSS3 transform的skew属性值图文详解
-
详解CSS3中border-image的使用
-
举例详解CSS3中的Transition