[分享]css3怎么用坐标移动div

CSS3的新特性中有许多能够实现复杂动画效果的属性，比如transform属性，可以对元素进行旋转、移动、扭曲等变形操作。其中移动元素是最常用的一种操作，下面介绍如何使用CSS3的坐标来移动div。/...

CSS3的新特性中有许多能够实现复杂动画效果的属性，比如transform属性，可以对元素进行旋转、移动、扭曲等变形操作。其中移动元素是最常用的一种操作，下面介绍如何使用CSS3的坐标来移动div。

/* CSS代码 */
div.move {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translateX(50px) translateY(50px);
} 

首先我们需要给需要移动的元素添加position: absolute;属性，这将使元素从文档流中脱离出来，可以按照自己的坐标进行定位。接下来使用top和left属性设置元素的初始位置，这里设置为(0,0)即页面的左上角。

现在我们需要使用transform属性，它可以实现元素的移动、旋转、缩放等变形效果。transform属性有许多值，其中translateX表示元素在X轴上移动的距离，translateY表示元素在Y轴上移动的距离。因此，transform: translateX(50px) translateY(50px);表示将元素移动到(50,50)的位置。

以上就是CSS3使用坐标移动div的方法，只需设置元素的position、top、left和transform属性即可轻松实现。当然，还有许多其它的变形效果可以探索，比如平移、旋转和缩放等。