2D转换
- 移动:translate
语法格式:
/* x就是x轴上移动的位置,y则是在y轴上移动的位置 中间用逗号分割 如果里面参数是% 移动的距离是 盒子自身的宽度或者高度来对比的*/
transform:translate(x,y)
/* 只在x轴上移动 */
transform:translateX()
/* 只在y轴上移动 */
transform:translateY()
特点
- 定义2D中的移动,沿着x和y轴移动
- translate最大的优点:不会影响到其他与元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
- 旋转:rotate
transform:rotate(度数)
- rotate里面跟度数,单位是deg
- 角度为正时,顺时针,反之则为逆时针
- 默认旋转的中心点是元素的中心点
transform-origin
设置元素转换的中心点
transform-origin:x,y;
- 缩放:scale
/* 里面写的数字不跟单位,就是倍数的意思 */
transform:scale(x,y);
/* 如果只有一个参数的话 代表等比例缩放 同时修改宽度和高度 */
2D转换综合写法
- 同时使用多个转换,其格式为:
transform:translate() rotate() scale()
- 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到前面