如何使用Javascript精確設置動態樣式轉換？

Question

我知道設置變換的方法，但我想設置旋轉並保持其他如縮放和傾斜。

或許，我們可以寫一個函數爲：

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

而對我們來說，我們的函數的setTransform：

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

希望元素是這樣的：

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

所以我的問題是如何編寫函數setTransform的內容？

Answer 1

注意：你應該使用如果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 el爲元素），第一步是獲取值，因此您更改給定函數的參數：

// 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的C部分）。

Answer 2

可能是下面將幫助你......

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

Answer 3

這裏的絕對最佳答案是一個真實的API，它允許我們影響計算樣式的任何現有值，而無需解析值。這種情況存在於一些被放棄且非跨瀏覽器的形式中，其中WebkitCSSMatrix API和W3C「官方」等效DOMMatrix。我已經看到了重新格式化和整合這兩種API的談話，但他們似乎並沒有就實施達成一致。這是一個使它跨瀏覽器工作的墊腳石：CSSMatrix class from github user arian。

這是如何工作的，您可以將它傳遞給計算出的變換字符串（例如："translsate3d(0px, 0px, 100px) scale(1.2) skew(2)"），並返回一個對象，您可以使用旋轉，變換，平移，傾斜函數來操作該對象。每個函數都會用新操縱的值返回自己的現有實例，並且可以簡單地將其「toString」值重新應用於元素樣式屬性。

很多的話，但這裏有一個例子（Chrome和Safari只是因爲WebkitCSSMatrix使用）：

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>