8

トランスフォームの設定方法はわかったのですが、回転は設定し、スケールやスキューなどはそのままにしておきたいです。

おそらく、関数を次のように書くことができます。

// A variable of element, not parameter. separate out it make more clear.
var el = document.getElementById('el');
function setTransform (p_name, p_value) {
  // how to write some code to set the el transform style...
}

さらに、私は要素を持っています:

<div id="el" style="transform: rotate(45deg) skew(45deg);"></div>

そして、私たちの関数 setTransform:

setTransform('rotate', '30deg');

要素がこれであることを願っています：

<div id="el" style="transform: rotate(30deg) skew(45deg);"></div>

だから私の質問は、関数setTransformの内容を書く方法ですか?

4

3 に答える 3

20

注: スキューの代わりに、skewX および/または skewY を使用する必要があります。ここで MDN 情報を参照してください。

変数内の変換を追跡する方が簡単です。

var elRot,    // the rotation 'counter' for the element 'el'
    elScale,  // the scale 'counter' for the element 'el'
    elSkewX,  // the skewX 'counter' for the element 'el'
    elSkewY;  // the skewY 'counter' for the element 'el'

// initialize values
elRot = 0;
elScale = 1;
elSkewX = 0;
elSkewY = 0;

またはオブジェクト:

var elTranform = {
    rot: 0,   // the rotation 'counter' for the element 'el'
    sca: 1,   // the scale 'counter' for the element 'el'
    skx: 0,   // the skewX 'counter' for the element 'el'
    sky: 0    // the skewY 'counter' for the element 'el'
};

これで関数から始めることができます (要素には引き続き var el を使用します)。最初のステップは値を取得することなので、関数に与えられた引数を変更します。

// use this with separate vars
function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    // how to write some code to set the el transform style...
}

// use this with the object
function setTransform (element, elTransformArg) {
    // how to write some code to set the el transform style...
}

次に、「滞在」している他の変換を再指定します。指定した例では、skewX は 45 度のままです。

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    // the brackets cause the string to be evaluated before being assigned
    element.style.transform = ("rotate() scale() skewX() skewY()");
}

また

function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate() scale() skewX() skewY()");
}

次に、引数を文字列に入れる必要があります。

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    element.style.transform = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");
}

また

function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate(" + elTransformArg.rot + "deg ) scale("
        + elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg ) skewY("
        + elTransformArg.sky + "deg )");
}

少し面倒なので、その文字列を変数に入れます (これは接頭辞にとって有益です):

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    var transformString = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");
    
    // now attach that variable to each prefixed style
    element.style.webkitTransform = transformString;
    element.style.MozTransform = transformString;
    element.style.msTransform = transformString;
    element.style.OTransform = transformString;
    element.style.transform = transformString;
}

また

function setTransform (element, elTransformArg) {
    var transformString= ("rotate(" + elTransformArg.rot + "deg ) scale("
        + elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg ) skewY("
        + elTransformArg.sky + "deg )");
    
    // now attach that variable to each prefixed style
    element.style.webkitTransform = transformString;
    element.style.MozTransform = transformString;
    element.style.msTransform = transformString;
    element.style.OTransform = transformString;
    element.style.transform = transformString;
}

関数を呼び出します。

setTransform(el, elRot, elScale, elSkewX, elSkewY);

また

setTransform(el, elTransform);

値を変更するには、変数またはオブジェクトの値を変更して呼び出します。

elRot = 45;
elSkewX = 30;
setTransform(el, elRot, elScale, elSkewX, elSkewY);

また

elTransform.rot = 45;
elTransform.skx = 30;
setTransform(el, elTransform);

このように、変換ごとに「カウンター」値を変更し、関数を呼び出して変換を適用するだけで済みます。前述のように、変更されていない変換を保持することが重要です。これは、変換の以前の CSS 値を新しいものに置き換えるだけだからです。複数の値を指定すると、最後の値のみが使用されます (CSS の C 部分)。

于 2013-11-08T21:45:09.863 に答える
0

以下があなたを助けるかもしれません...

el.style.webkitTransform = "";
el.style.MozTransform = "";
el.style.msTransform = "";
el.style.OTransform = "";
el.style.transform = "";
于 2013-10-30T07:33:53.380 に答える