2021年12月19日学习重点整理
2D转换基础知识梳理
转换：transform
属性
- 移动
translate
transform: translate(x, y);
/* x和y用逗号隔开 */
transform: translateX(x);
transform: translateY(y);
三种代码方式
特点：
- 不会影响其它元素的位置,移动过后原来的位置依然保留
- 百分比单位是相对于盒子本身的
- 沿着X和Y移动
- 对行内标签没有效果
- 旋转
rotate
transform: rotate(50deg);
/* 单位 deg（度） */
可以利用transform-origin: x y;设置旋转的中心点
transform-origin: x y;中的x和y用空格隔开- x和y默认为 50% 50%
- x和y 可以为像素、或者方位名词left、right、top、bottom、center