1

Impress.jsを使用してプレゼンテーションに取り組んでおり、iPad での使用に適応させることを考えていました。しかし、Impress が各スライドに変形を適用する方法が気になります。CSS を使用するだけでなく、変換をデータ属性として HTML に配置し、Javascript で適用します。

これは非常に複雑で難しい方法だと思います。ただし、データ属性を扱った経験はあまりないので、これについて意見を求めたいと思いました。普通にCSSを書いたほうがいいのでしょうか、それともdata属性を使うメリットの方が面倒でしょうか?

4

1 に答える 1

4

理由は簡単です。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/

于 2012-01-19T09:14:05.617 に答える