注:あなたは、スキューの代わりにskewX値および/またはskewYを使用する必要があります。 the MDN info hereを参照してください。
変数に変換を追跡するために容易になるだろう:
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を使用します。関数の引数を変更します)。
// 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値は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()");
}
または
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 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;
}
または
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;
}
今すぐ関数を呼び出す:
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値に置き換えるだけで、変更されていない変換を保持することが重要です。複数の値を指定すると、最後の値のみが使用されます(CSSのC部分)。
そのMDNページには、「Gecko 14.0はskew()の実験的サポートを削除したが、互換性の理由から、Gecko 15.0に再導入されました。非標準であり、将来**削除される可能性が高いため**使用しないでください**。 –