空间转换2D

• 使用transform属性实现元素的位移，旋转，缩放等效果。

• 参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms

方法

• translateX(100px) X轴移动
• translateY(100px) Y轴移动
• translate(x,y) 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
• rotate(90deg) 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
• scale(1,2) 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）
• skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。

案例

div {
	/* 让div水平移动100px */
	transform: translateX(100px);
	/* 让div水平移动100px,垂直移动100px */
	transform: translate(100px, 100px);
	/* 让div旋转90° */
	transform: rotate(90deg);
}