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

Question

我正在使用 .row1、.col1 .. .row6、.col6 之类的 css 使用我的 tile 元素的网格绝对位置。如果我需要使用 CSS3 GPU 加速转换和转换将图块从 .row6,.col6 移动到 .row2,col2

最好的方法是什么？

提前致谢

Answer 1

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

将 tile 元素定位在顶角 (0, 0) 或任何使用 CSS 的偏移量。

创建一个函数将每个 tile 元素移动到其位置（我假设为 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”）和新的所需位置传递给 moveIt：

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

您可以根据保存信息的方式更改对象属性或数组成员的输入。