Wie kann man eine dynamische Transformation mit Javascript einstellen?

Question

Ich kenne die Methode zum Einstellen der Transformation, aber ich möchte die Rotation einstellen und andere wie Skalierung und Skew beibehalten.

Vielleicht können wir eine Funktion schreiben, wie:

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

Außerdem habe ich ein Element:

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

Und uns unsere Funktion setTransform:

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

Ich hoffe, das Element ist dies:

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

Also meine Frage ist, wie man Inhalt der Funktion setTransform schreiben?

Answer 1

Hinweis: Sie verwenden sollten skewX und/oder skewY statt Skew. Siehe the MDN info here.

Es wäre einfacher, den Überblick über die Transformationen in einer Variablen zu halten:

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 mit der Funktion starten (Sie noch var verwenden el für das Element), erhält der erste Schritt die Werte, also ändern Sie die Argumente, die der Funktion übergeben werden:

Weiter Sie haben respezifizieren alle anderen Transformationen, die ‚bleiben‘ werden, in dem Beispiel, das Sie geben, bleibt die skewX 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()"); 
} 

Nun müssen Sie die Argumente in die 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)"); 
} 

Ein bisschen chaotisch, so in einer Variablen, die Zeichenfolge setzen (dies für die Präfixe von Vorteil sein wird):

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

nun die Funktion aufrufen:

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

oder

setTransform(el, elTransform); 

Um Werte zu ändern, die Variablen oder Objektwerte ändern und rufen:

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

oder

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

Auf diese Weise können nur die ‚Zähler‘ Werte ändern müssen, um für jede transformieren, und rufen Sie die Funktion um die Transformation anzuwenden. Wie oben erwähnt, ist es wichtig, alle Transformationen beizubehalten, die nicht geändert werden, da dies einfach den vorherigen CSS-Wert für die Transformation durch den neuen ersetzt. Wenn Sie mehrere Werte angeben, wird nur die letzte verwendet (der C-Teil von CSS).

Answer 2

Mai Ihnen helfen werden folgende ...

el.style.webkitTransform = ""; 
el.style.MozTransform = ""; 
el.style.msTransform = ""; 
el.style.OTransform = ""; 
el.style.transform = ""; 

Answer 3

Die absolut beste Antwort hier wäre eine echte API, die es uns ermöglicht, jeden vorhandenen Wert des berechneten Stils zu beeinflussen, ohne Werte analysieren zu müssen. Eine solche Sache existiert in einigen verlassenen und nicht-browserübergreifenden Form mit dem WebkitCSSMatrix API und dem W3C "offiziellen" Äquivalent DOMMatrix. Ich habe Gespräche darüber gesehen, diese beiden APIs neu zu formatieren und zu konsolidieren, aber sie scheinen sich bei der Umsetzung nicht einig zu sein. Hier ist ein Shim, um es Cross-Browser funktionieren zu lassen: .

Wie dies funktioniert, ist, dass Sie es die berechnete Transformationszeichenfolge (ex .: "translsate3d(0px, 0px, 100px) scale(1.2) skew(2)") übergeben können und ein Objekt zurückgibt, das Sie mit Funktionen zum Drehen, Transformieren, Verschieben und Versetzen bearbeiten können.Jede Funktion gibt eine vorhandene Instanz von sich selbst mit dem neu manipulierten Wert zurück, und Sie können einfach ihren "toString" -Wert erneut auf die Eigenschaft element style anwenden.

Viele Worte, aber hier ist ein Beispiel (Chrome und Safari nur wegen der WebkitCSSMatrix Nutzung):

var computedStyle = window.getComputedStyle(document.querySelector('.btn')); 
 
var matrix = new WebKitCSSMatrix(computedStyle.transform); 
 

 
// Every second, we add +6 degrees of rotation, no need to read the initial value since WebkitCSSMatrix has parsed it for us 
 
window.setInterval(function(){ 
 
    matrix = matrix.rotate(6); 
 
    // matrix = matrix.translate(2, 0, 0); 
 
    // matrix = matrix.scale(1.8); 
 
    document.querySelector('.btn').style.transform = matrix.toString(); 
 
}, 1000);

body{ 
 
\t \t \t padding-top: 100px; 
 
\t \t \t text-align: center; 
 
\t \t } 
 

 
\t \t .btn{ 
 
\t \t \t text-transform: uppercase; 
 
\t \t \t border-radius:200%; 
 
\t \t \t border:1px solid #000; 
 
\t \t \t width: 2em; 
 
\t \t \t height: 2em; 
 
\t \t \t display: inline-block; 
 
\t \t \t text-align: center; 
 
\t \t \t line-height: 2em; 
 
\t \t \t text-decoration: none; 
 
\t \t \t font-family: sans-serif; 
 
\t \t \t color: #000; 
 
     
 
     // It is already rotated and scaled 
 
\t \t \t transition: transform 1000ms cubic-bezier(.28,.73,.31,1); 
 
     transform: rotate(45deg); 
 
     -webkit-transform: rotate(45deg); 
 
\t \t } 
 

 
\t \t .btn:hover{ 
 
\t \t \t background:#000; 
 
\t \t \t color:#fff; 
 
     
 
     transform: rotate(0deg) scale(1.5); 
 
\t \t }

<a class="btn" href="#">|</a>