时间:2021-05-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;
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
由于安卓手机无法识别border:0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现。原理:将
CSS3中的变形功能:在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。1、如何使用transform功能
一、scale()方法缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中
transform:scale();缩放在IE浏览器下会有抖动transform缩放在IE浏览器下会有抖动可以在缩放的同时添加一个旋转如:transform:s
前言CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。2D转换的属性名为transform,使用方法为transform:method(valu