空间转换2D

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

MDN 文档

方法

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 度。

案例

css

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