CSS变形

CSS的变形包括这么几种效果，分别有平移（translate），缩放（scale），倾斜（skew），旋转（rotate），下面我们来分别看看。

01

平移（translate）

语法：transform: translate（X轴平移的像素，Y轴平移的像素）

Eg:

#div1:hover{
     transform: translate(10px,-9px);
 }

效果如图所示：

02

缩放（scale）

语法：transform: scale（宽度缩放值，高度缩放值）

如果参数只有一个值，默认第二个值和第一个值相等；默认值是1,0-0.99的任意一个数字可以缩小元素，大于1则会使元素放大。例如：scale（0.8），元素会缩小0.8倍，而scale（1.5）元素则会放大1.5倍。

Eg:

#div2:hover{
       transform: scale(1.2);
       }

效果图：

03

旋转（skew）

语法：transform: skew(X轴倾斜的角度,Y轴倾斜的角度);单位为deg(°)

Eg：

#div3:hover{
       transform: skew(10deg,10deg);
}

效果图：

04

旋转（rotate）

语法：transform: rotate(旋转的度数);其中参数的单位是deg(°)。

Eg:

#div4:hover{
       transform: rotate(20deg);
}

效果如图：