知识点一:旋转
transform: rotate(180deg) //只能传一个参数,,正值是顺时针 负值是逆时针
度数用deg表示
沿着x轴旋转:
transform: rotateX(180deg);
沿着Y轴旋转:
transform: rotateY(180deg);
默认是沿着中心旋转。。。
改变中心轴旋转位置
transform-origin: top left; //沿着左上角旋转 transform-origin: 100px 200px; //沿着坐标那个点旋转
和上一个配合使用,有两种形式写参数
知识点二:倾斜
transform: skew(x,y); transform: skewX(x); transform: skewY(y);
可以传两个参数:第一个是x轴的偏移,,角度是与y轴的夹角
第二个是Y轴的偏移,,角度是与X轴的夹角
围绕圆心旋转
改变旋转轴位置: transform-origin: top right; //同上
知识点三:平移
transform: translate(x,y); x轴距离 y轴距离 可以为正负值
平移没有origin属性 ,,因为是整体平移
知识点四:缩放
transform: scale(n); transform: scale(x,y);
一个参数时 : n表示数字,0-1之间是缩放的,正常值是1,,,比1 大的就是放大
两个值时,一个是X位置,一个是Y位置
有origin属性,,,同上上上。。。。。。。。