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

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

这让我觉得这是一种过度复杂和困难的做事方式。虽然我没有很多处理数据属性的经验，所以我想对此有所看法。正常写CSS还是更好，或者使用数据属性的好处是否超过了麻烦？

来源

2012-01-19 Jordan Acosta

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

这是相同的代码与数据ATTR：

你可以玩的3D CSS矩阵在这里：

http://jsfiddle.net/F8xLv/

来源

2012-01-19 09:14:05 Duopixel

所以最好使用比数据属性有解析矩阵，因为后者甚至比以前更复杂？看起来你上面演示的方法可能同样有效，不难实现。 –

我用数据集示例更新了答案，我认为它更具可读性。 – Duopixel

好吧，我现在明白了。 –

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

回答

相关问题