transform:变形
rotate:旋转
translate:移动
scale:缩放
skew:扭曲
一切变化都是“形变”引起的变化,所以transform就是老大,大家都围着他转
1.transform:rotate(20deg);顺时针旋转20度
2.transform:rotate(-20deg);逆时针旋转20度
3.transform:translate(20px,30px);向右移动20px,向下移动30px
4.transform:translateX(20px);向右移动20px
5.transform:translateY(30px);向下移动30px
6.transform:scale(1.25,1.3);横向放大1.25倍,纵向放大1.3倍
7.transform:scaleX(0.8);宽度缩小为原来的0.8,长度不变
8.transform:scaleY(0.8);长度缩小为原来的0.8,宽度不变
9.transform:skew(15deg,20deg);x方向扭曲15度,y轴方向扭曲20度
10.transform:skewX(15deg);水平方向扭曲变形15度
11.transform:skewY(5deg);垂直方向扭曲变形10度