1

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

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

4

1 回答 1

4

原因很简单：如果您设置了一个 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/

于 2012-01-19T09:14:05.617 回答