Impress.js 및 CSS 변형 대신 HTML5 데이터 속성 사용

Question

나는 Impress.js을 사용하여 프리젠 테이션을 진행해 왔고 iPads에서 사용하기 위해이를 적용하려고합니다. 그러나 Impress가 각 슬라이드에 변형을 적용하는 방법에 대해 우려하고 있습니다. CSS 만 사용하는 대신 HTML의 데이터 속성으로 변환 된 다음 자바 스크립트로 변환이 적용됩니다.

이렇게하면 지나치게 복잡하고 어려운 일을하게됩니다. 데이터 속성에 대한 많은 경험이 없기 때문에 이것에 대해 의견을 나누고 싶습니다. CSS를 정상적으로 작성하는 것이 낫지 않습니까? 아니면 데이터 속성을 사용하면 얻을 수있는 이점이 번거 로움보다 중요합니까?

Answer 1

이유는 간단합니다. 자바 스크립트 나 CSS를 통해 CSS 변환을 설정하면 가져 오기를 시도 할 때 매트릭스 변환이 반환됩니다. 그래서 matrix3d(10px,0,0,[...]) 될 것

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

transform

이 translate3d(10px,0,0)하지 않을 것입니다 ... 당신은 같은 간단한 일을 말한다.

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

당신은 3D CSS 매트릭스 함께 놀러 수 있습니다 :이 데이터 ATTR과 같은 코드가

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 

사용하면 다음과 같은 행렬을 분석해야 할 것이 값을 ... 얻으려면 여기 :

http://jsfiddle.net/F8xLv/