[分享]css中2d位移

pre { background-color: #f8f8f8; border: 1px solid #ddd; font-family: Consolas, monospace; padding: 10px; overflow-x: auto; } p { font-size: 16px; }

CSS中的2D位移是指可以在平面坐标系中沿着x轴或y轴方向移动HTML元素，使用CSS的transform属性可以实现。

transform属性可以实现2D位移、缩放、旋转等变换效果，其中位移使用translate函数，语法如下：

 transform: translate(x, y); 

其中x和y是需要移动的距离，可以是正数也可以是负数，单位可以是px、em、rem等任意单位。

下面是一个实例，将一个div元素向右移动100px，向下移动50px：

 div {
        background-color: #ccc;
        width: 100px;
        height: 100px;
        transition: transform .5s ease;
    }
    div:hover {
        transform: translate(100px, 50px);
    } 

在上面的代码中，当鼠标悬停在div元素上时，将div元素向右移动100px，向下移动50px，过程使用0.5s的时间实现，效果如下：

需要注意的是，translate函数对元素进行的移动并不影响其在文档流中的位置，也就是说，移动后的元素在其他元素的排列中依然占据原来的位置。

同时，如果需要将元素移动到指定的位置，可以使用position属性结合top和left属性实现，但这种方式相对麻烦。

小结：使用CSS的transform属性中的translate函数可以实现2D位移，在元素移动后不改变元素在文档流中的位置。