CSS3 transform:scale的使用

作者: 漆家洲 分类: CSS3,建站知识 发布时间: 2018-03-22 14:28 浏览次数:204

transform属性中的scale方法经常用在元素的缩放。使用起来很简单,比如,想要实现元素水平缩放2倍,垂直缩放4倍,就可以这样写:

transform: scale(2,4);

代码简单,但是要有几点要注意:

1.scale默认居中缩放的,也就是说,在缩放的时候,元素是向四周缩放的。如果元素在页面靠边位置,元素放大后会超出区域。如下面的代码:

div{width: 50px; height: 50px; background: #f00;transform: scale(2,4);}

实现缩放后元素的宽度应该是100px,高度200px。但元素在页面的左上角。所以实际看到的并没有这么多。如下图:

scale

实际宽度为75px,少了25px。这个时候加上margin:50px;问题即可解决。

2.scale的参数只能是数值,初始值为1,大于1扩张,小于1缩小。可以是负值。不能是百分比或者像素值。

3.可以通过scaleXscaleY来单独实现元素水平方向或者垂直方向的扩展或缩小。

4.如果scale只有一个值,则可以实现等比缩放。

5.scale的缩放占据的原始尺寸不变,页面布局不会发生变化。如需要通过缩放改变元素的占据空间,可以使用zoomzoom/scale不要同时使用,因为,缩放效果会累加。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!