html5中文学习网

您的位置: 首页?>?网页制作?>?css365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户 ? 正文

css3的transform中scale缩放详解_css3_CSS_网页制作

[ ] 已经帮助:人解决问题
这篇文章主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下

下面我们从3个方面开始介绍:SquHTML5中文学习网 - HTML5先行者学习网

1、scale(x,y) 对元素进行缩放SquHTML5中文学习网 - HTML5先行者学习网

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数SquHTML5中文学习网 - HTML5先行者学习网
Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。SquHTML5中文学习网 - HTML5先行者学习网
transform:scale(2,2.5);? SquHTML5中文学习网 - HTML5先行者学习网
?SquHTML5中文学习网 - HTML5先行者学习网
2、scaleX() 元素只在X轴(水平方向)缩放元素。SquHTML5中文学习网 - HTML5先行者学习网
?SquHTML5中文学习网 - HTML5先行者学习网
默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点SquHTML5中文学习网 - HTML5先行者学习网
transform:scaleX(2);? SquHTML5中文学习网 - HTML5先行者学习网
?SquHTML5中文学习网 - HTML5先行者学习网
3、scaleY() 元素只在Y轴(垂直方向)缩放元素。SquHTML5中文学习网 - HTML5先行者学习网
?SquHTML5中文学习网 - HTML5先行者学习网
基点一样在元素的中心位置。可以通过transform-origin来改变基点。SquHTML5中文学习网 - HTML5先行者学习网
transform:scaleY(2);? SquHTML5中文学习网 - HTML5先行者学习网

最后我们看看兼容性写法:SquHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
SquHTML5中文学习网 - HTML5先行者学习网
.test{ SquHTML5中文学习网 - HTML5先行者学习网
-moz-transform:scale(2,2); SquHTML5中文学习网 - HTML5先行者学习网
-webkit-transform:scale(2,2); SquHTML5中文学习网 - HTML5先行者学习网
-o-transform:scale(2,2); SquHTML5中文学习网 - HTML5先行者学习网
background:url(img/i.png) no-repeat; SquHTML5中文学习网 - HTML5先行者学习网
width:198px; SquHTML5中文学习网 - HTML5先行者学习网
height:133px; SquHTML5中文学习网 - HTML5先行者学习网
} SquHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助