CSS3的几个变形案例……
大家好，欢迎来到雄雄的小课堂，那个……辣椒酱很好吃的，哈哈哈哈！今天给大家分享的内容是利用CSS制作网页的动画。
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的其他动画，我们下期在分享，今天太忙啦~
往期精彩
点分享
点点赞
点在看
