CSS3 动画使用 CSS 网格类移动 x，y

Question

我正在使用css的瓷砖元素的网格绝对位置，例如.row1，.col1 .. .row6，.col6。如果我需要使用 CSS6 GPU 加速过渡和转换将磁贴从 .row6，.col6 移动到 .row2，col2

最好的方法是什么？

提前致谢

Answer 1

使用 translate3d（） 应该可以将最后一个参数固定为零。

使用 CSS 将磁贴元素放置在顶角 （0， 0） 或任何偏移量的位置。

创建一个函数将每个图块元素移动到其位置（我假设为 px，但这可能会改变）：

function moveIt(element, xpos, ypos) {
    var move = ("translate3d( " + xpos + "px, " + ypos + "px, 0 )");
    element.style.webkitTransform = move;
    element.style.MozTransform = move;
    element.style.msTransform = move;
    element.style.OTransform = move;
    element.style.transform = move;
}

现在，使用默认设置或保存的设置在每个磁贴上调用该函数，以将磁贴设置到位。

完成此操作后，您只需传递元素（我们称之为"el"）和新的所需位置即可移动它：

// pretending each grid section is 50px, since row1col1 is (0, 0)
moveIt(el, 50, 50);

您可以更改对象属性或数组成员的输入，具体取决于您保存信息的方式。