Question

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

这让我觉得这是一种过于复杂和困难的做事方式。但是，我没有很多使用数据属性的经验，所以我想对此有所了解。如果只是正常编写CSS，或者使用数据属性的好处是否超过麻烦会不会更好？

Answer 1

原因很简单：如果您通过javascript或CSS设置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/

Impress.js＆amp;使用HTML5数据属性而不是CSS转换

1 个答案: