1.css 转换属性
属性 transform
取值 转换函数,如果出现多个转换函数,使用空格隔开
2.转换原点
属性 transform-origin
取值
1.关键字 top / bottom / left / right / center
2.使用px 或者 % 指定转换原点
3.默认转换原点在元素的中心位置
3.转换函数
1.平移转换
1.转换函数 translate()
2.取值
1.translate(x) 元素沿水平方向进行移动
等价于 translateX()
2.translate(x,y) 元素沿水平方向移动x,沿垂直方向移动y
3.元素沿垂直方向平移
translateY()
2.缩放
1.根据比例改变元素大小
2.语法
1.转换函数 scale(x) 表示元素x轴和y轴都按照指定比例缩放
2.scaleX(x)
表示原始尺寸取值为无单位的数字,默认值是1,表示原始尺寸,元素沿x轴缩放
取值 >1 元素放大的比例
取值在0-1之间,元素会按照比例缩小
取值为负值,元素会反转
3.scaleY(x) 元素沿Y轴缩放
3.旋转
1.改变元素在文档中的显示角度
2.属性 rotate(ndeg)
3.取值为带角度单位的数值,eg:45deg
取值为正 表示顺时针旋转
取值为负 表示逆时针旋转
4.注意:
1.转换原点一旦改变,会影响转换效果
2.旋转操作会连带坐标轴一起旋转,会影响其后其他的转换操作
transform-origin:left bottom 以左下角为旋转原点
transform:rotate(45deg); 旋转45°