Nota: si dovrebbe usare skewX e/o skewY invece di skew. Vedi the MDN info here.
Sarebbe più facile per tenere traccia delle trasformazioni in una variabile:
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;
o di un oggetto:
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'
};
Così ora si può iniziare con la funzione (si continua a utilizzare var el per l'elemento), il primo passo è ottenere i valori, in modo da modificare gli argomenti assegnati alla funzione:
// 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...
}
Successivo avete ri-specificato nessuna altre trasformate che vengono 'soggiornano', nell'esempio si dà, lo skewX rimane 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()");
}
o
function setTransform (element, elTransformArg) {
element.style.transform = ("rotate() scale() skewX() skewY()");
}
Ora bisogna mettere gli argomenti nei la stringa:
function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
element.style.transform = ("rotate(" + rotationArg + "deg) scale(" + scaleArg
+ ") skewX(" + skewXArg + "deg) skewY(" + skewYArg + "deg)");
}
o
function setTransform (element, elTransformArg) {
element.style.transform = ("rotate(" + elTransformArg.rot + "deg) scale("
+ elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg) skewY("
+ elTransformArg.sky + "deg)");
}
un po 'disordinato, così si può mettere quella stringa in una variabile (questo sarà vantaggioso per i prefissi):
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;
}
o
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;
}
Ora chiamare la funzione:
setTransform(el, elRot, elScale, elSkewX, elSkewY);
oppure
setTransform(el, elTransform);
Per cambiare i valori, cambiate le variabili o valori dell'oggetto e chiamare:
elRot = 45;
elSkewX = 30;
setTransform(el, elRot, elScale, elSkewX, elSkewY);
o
elTransform.rot = 45;
elTransform.skx = 30;
setTransform(el, elTransform);
In questo modo è sufficiente modificare i valori 'contatore' per ogni trasformazione, e chiamare la funzione applicare la trasformazione. Come accennato in precedenza, è importante conservare tutte le trasformazioni che non vengono modificate poiché sostituisce semplicemente il precedente valore CSS per la trasformazione con quello nuovo. Fornire più valori significa che viene utilizzato solo l'ultimo (la parte C del CSS).
Vorrei solo sottolineare che su quella pagina MDN c'è una nota che dice: "Gecko 14.0 rimosse il supporto sperimentale per skew(), ma è stato reintrodotto in Gecko 15.0 per motivi di compatibilità, in quanto non è standard e sarà probabilmente rimosso in futuro **, ** non ** usarlo. " –