transform2D转换

2D转换

• 移动:translate

语法格式:

/* x就是x轴上移动的位置,y则是在y轴上移动的位置 中间用逗号分割  如果里面参数是% 移动的距离是 盒子自身的宽度或者高度来对比的*/
transform:translate(x,y)
/* 只在x轴上移动 */
transform:translateX()
/* 只在y轴上移动 */
transform:translateY()

特点

1. 定义2D中的移动,沿着x和y轴移动
2. translate最大的优点:不会影响到其他与元素的位置
3. translate中的百分比单位是相对于自身元素的translate:(50%,50%);
4. 对行内标签没有效果

• 旋转:rotate

transform:rotate(度数)

1. rotate里面跟度数,单位是deg
2. 角度为正时,顺时针，反之则为逆时针
3. 默认旋转的中心点是元素的中心点

transform-origin

设置元素转换的中心点

transform-origin:x,y;

• 缩放:scale

/* 里面写的数字不跟单位,就是倍数的意思 */
transform:scale(x,y);
/* 如果只有一个参数的话 代表等比例缩放 同时修改宽度和高度 */

2D转换综合写法

1. 同时使用多个转换,其格式为:

transform:translate() rotate() scale()

2. 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
3. 当我们同时有位移和其他属性的时候,记得要将位移放到前面