Impress.js 和使用 HTML5 数据属性代替 CSS 转换

Question

我一直在使用 Impress.js 制作演示文稿，并正在考虑对其进行调整在 iPad 上使用。但我担心 Impress 如何将变换应用于每张幻灯片。不只是使用 CSS，而是将转换作为数据属性放入 HTML 中，然后使用 Javascript 进行应用。

我觉得这是一种过于复杂和困难的做事方式。不过，我在处理数据属性方面没有太多经验，所以我想就此获得一些意见。正常编写 CSS 会更好，还是使用数据属性的好处大于麻烦？

Answer 1

原因很简单：如果您设置了 CSS 转换（通过 javascript 或 CSS），当您尝试获取它时，它会返回一个矩阵转换。假设你做了一些简单的事情，例如...

element.style.webkitTransform = "translate3d(10px,0,0)";
var transform = element.style.webkitTransform;

transform 不会是 translate3d(10px,0,0)，它将是 matrix3d(10px,0, 0,[...])。要获取这些值，您需要解析矩阵，例如...

element.style.webkitTransform = "translate3d(10px,0,0)";
var matrix = new WebKitCSSMatrix(element.style.webkitTransform); //get the matrix
var x = matrix.m41 //get the value of x in the matrix
x += 1500 //modify x
element.style.webkitTransform = matrix.toString //Apply the new transformation

这与 data-attr 的代码相同：

  element.style.webkitTransform = "translate3d(10px,0,0)";
  x = element.dataset.x
  element.style.webkitTransform = "translate3d(" + x + ",0,0)"

您可以在此处使用 3D CSS 矩阵：

http://jsfiddle.net/F8xLv/