css3中的2d使用

2d有四大应用     位移,缩放,旋转,倾斜

位移:

属性为transform   属性值(功能函数) translat()

transform:translat(200px,200px)

当属性值为两个值的时候表示,x轴200px,y轴200px,原点对齐,要注意从左到右为正,从上到下为正

transform:translat(200px);

可以写成transform:translatX(200px); 表示在X轴上进行移动,Y轴也可以

当只有一个属性值的时候表示默认x轴,y轴为0

当属性值为负数的时候就后往反方向移动左到右为正,从上到下为正,参数可以为正也可以为副

位移属性是不会脱离文档流的

缩放:

属性为transform 属性值(功能函数为) scale(参数)

        里面的值为单纯的数字,表示为倍数,当宽和高想等的时候可以简写为一个

        和位移一样,可以在后面接一个X或者Y表示在X轴或者Y轴上进行缩放

        当参数为0的时候表现为消失  当参数为1的时候表现为显示,而且大小不变,当大于0小于1的时候表现为缩小,当大于1的时候表现为放大,

        可以为负数,当负数的时候,先是变为0消失,然后再放大为负数的大小,方向旋转180°

旋转属性: 

        属性为rotate(参数) ,只有一个参数,为正值的时候就是顺时针,为负值的时候就是逆时针.默认是按照着Z轴进行旋转的

        rotateX/rotateY(可以添加x和y的后缀名,意味着按着X轴,或者Y轴进行旋转)

倾斜:

属性为transgorm属性值(功能函数为)skew 可以skew(x,y) 也可以shekX/shekY