hooyantsing's Blog

P161_10_2D缩放使用方法

字数统计: 119阅读时长: 1 min
2020/04/22

P161 10 2D缩放使用方法

scaleX

水平方向缩放。>1的时候放大,<1的时候缩小。

1
2
3
4
5
6
7
8
main:hover div:nth-child(2){
    //缩小一半
    transform:scaleX(0.5);
    //当前大小没变化
    transform:scaleX(1);
    //放大一倍
    transform:scaleX(2);
}

scaleY

垂直方向缩放。>1的时候放大,<1的时候缩小。

scale

简写,相当于scaleX和scaleY的组合。

1
2
//x y 水平方向扩大一倍 垂直方向缩小一半
transform:scale(2,0.5);
CATALOG