2013-10-30 5 views
5

私は変換を設定する方法を知っていますが、私は回転を設定し、スケールやスキューなどの他のものを保持したいと思います。Javascriptを使ってダイナミックスタイルのトランスフォームを正確に設定する方法は?

おそらく、我々のように関数を記述することができます

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

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

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

私は願っています

// 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(30deg) skew(45deg);"></div> 

私の質問は、どのように関数setTransformの内容を記述するのですか?

答えて

14

注:あなたは、スキューの代わりに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部分)。

+0

そのMDNページには、「Gecko 14.0はskew()の実験的サポートを削除したが、互換性の理由から、Gecko 15.0に再導入されました。非標準であり、将来**削除される可能性が高いため**使用しないでください**。 –

1

は...あなたを助ける、次のことかもしれ

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

なしヘルプ:

言葉の多くが、ここでは一例(ChromeとSafariのためだけのWebkitCSSMatrixの使用)です。私はブラウザベンダープレフィックスを知っています。私は回転だけを設定し、傾きやその他を保持したいと思います。私の質問を読んでください。 – Tychio

+0

oh..おそらく、あなたはそれのまわりでいくつかの文字列の操作を行う必要があります。 – nik

+0

RegEx?それ以外の方法はありません。 – Tychio

1

ここで絶対的な答えは、値を解析することなく計算されたスタイルの既存の値に影響を与えることができる実際のAPIです。そのようなものは、放棄されたブラウザではなく、ブラウザでないものには、WebkitCSSMatrix APIとW3Cの「公式」同等のものDOMMatrixが存在します。私はこれらの2つのAPIを再フォーマットして統合することについて話しましたが、実装に同意していないようです。クロスブラウザで動作させるシムがあります:CSSMatrix class from github user arian

これは、計算された変換文字列(例:"translsate3d(0px, 0px, 100px) scale(1.2) skew(2)")を渡すことができ、回転、変換、変換、スキュー機能で操作できるオブジェクトを返します。すべての関数は、新しく操作された値を使用して、既存のインスタンスを返します。単純に要素スタイルプロパティに "toString"値を再適用できます。

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>

関連する問題