javascript - 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

这是与数据属性相同的代码:

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

您可以在这里使用 3D CSS 矩阵:

http://jsfiddle.net/F8xLv/