Wie, um eine genaue Einstellung einer dynamischen Stil verwandeln mit Javascript?

Hinweis: Sie sollten skewX und/oder skewY statt Neigung). Sehen die MDN-info hier.

Wäre es einfacher, den überblick zu behalten-Transformationen in einer Variablen:

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;

oder ein Objekt:

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'
};

So, jetzt können Sie beginnen, mit der Funktion (Sie wird immer noch die Verwendung von " var el für das element), der erste Schritt ist, um die Werte, so ändern Sie die Argumente der Funktion:

//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...
}

Weiter haben Sie die re-geben Sie eine beliebige andere Transformationen, 'wohnen', in dem Beispiel, das Sie geben, die skewX bleibt 45deg:

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()");
}

oder

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

Setzen Sie die Argumente in der Zeichenfolge:

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

oder

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

Etwas chaotisch, so setzen Sie die Zeichenfolge in eine variable (diese wird von Vorteil sein für die Präfixe):

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    var transfromString = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");

    //now attach that variable to each prefixed style
    element.style.webkitTransform = transfromString;
    element.style.MozTransform = transfromString;
    element.style.msTransform = transfromString;
    element.style.OTransform = transfromString;
    element.style.transform = transfromString;
}

oder

function setTransform (element, elTransformArg) {
    var transfromString = ("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 = transfromString;
    element.style.MozTransform = transfromString;
    element.style.msTransform = transfromString;
    element.style.OTransform = transfromString;
    element.style.transform = transfromString;
}

Rufen Sie jetzt die Funktion:

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

oder

setTransform(el, elTransform);

Werte ändern, ändern Sie die Variablen-oder Objekt -, Werte-und rufen:

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

oder

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

Diese Weise müssen Sie nur ändern Sie den 'counter' - Werte für jede Transformation, und rufen Sie die Funktion anwenden der Transformation. Wie oben erwähnt, ist es wichtig, dass alle Transformationen, die nicht geändert werden, da dies einfach ersetzt den vorherigen Wert der CSS transform-mit dem neuen. Geben Sie mehrere Werte bedeutet nur das Letzte verwendet wird (der C-Teil von CSS).

InformationsquelleAutor thisiate