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); }
效果如图:
关于CSS的其他动画,我们下期在分享,今天太忙啦~