如何設置變換的單個值而保留其他值？

Question

如果你有一個具有許多變換值的元素，你如何改變其中一個值而不改變其他值？

您可以每次重寫它們，但在某些情況下，這意味着您必須將轉換的css分解爲不同的部分。例如：

-webkit-transform:rotateY(45deg) rotate(45deg); 

您必須獲取旋轉和旋轉的屬性和值。沒有一種方法可以在不更改rotateY值的情況下進行旋轉和旋轉？

該問題說明了here。

Answer 1

沒有辦法直接修改變換的單個組件。遺憾的是，各種可能的變換都是作爲transform屬性上的值實現的，而不是屬性本身。對於CSS屬性值沒有對象模型 - 就JavaScript而言，屬性值始終只是一個字符串。如果transform被視爲例如transform-rotate-y,transform-*等的速記屬性，則background是所有background-*屬性的速記屬性的相同方式。這將允許我們通過JavaScript直接訪問這些值，但它沒有以這種方式實現，所以我們運氣不佳。

編輯：完成這個任務的最簡單方法是（不研究規範並且執行一些數學操作）就是nest your elements, applying different transformations to each。如果您應用多個不會更改的轉換，請繼續並將這些轉換組合到一個元素上。那你想改變任何改造，使用一個單獨的元素：

在這裏工作：jsfiddle.net/mkTKH/15

---

編輯：我下面原來的解決方案將無法工作。在測試中，我發現getComputedStyle()將轉換轉換爲matrix()。一個early draft of the spec說：

由getComputedStyle返回的樣式對象的transform屬性包含了類型CSS_MATRIX單CSSTransformValue。 6個參數表示應用transform屬性中列出的各個功能的結果的3x2矩陣。

---

所以，你必須分析它。如果你想改變只有一個屬性值的部分，你可以使用正則表達式來解析值：

var rotateY = "rotateY(" + deg + "deg)"; 
var transform = el.style.webkitTransform.replace(/\brotateY([^)]+)\b/, rotateY); 
el.style.webkitTransform = transform; 

我想創建一個可重複使用的功能：

function setTransformValue(el, name, value) { 
    var currentValue = new RegExp(name + "([^)]+)"); 
    var style = window.getComputedStyle ? getComputedStyle(el) : el.currentStyle; 
    var currentTransform = style.transform || 
          style.webkitTransform || 
          style.MozTransform || 
          style.msTransform || 
          style.OTransform; 
    var transform; 
    if (currentValue.test(currentTransform)) { 
     transform = currentTransform.replace(currentValue, name + "(" + value + ")"); 
    } 
    else { 
     transform = currentTransform + " " + name + "(" + value + ")"; 
    } 
    el.style.transform = transform; 
} 

未經檢驗。

Answer 2

所以@ gilly3是正確的，你不能真正做到這一點，但這裏是你如何可以種捏造事實。

1. 記住的電流值中的對象在該對象中的值的
2. 修改的一部分。
3. 有一個將對象轉換爲字符串的函數。
4. 應用該字符串。

代碼示例

var el = document.getElementById('blablabla'); 
var transform = { 
    rotate: 45, 
    rotateY: 45 
} 

function getTransform() { 
    var str = '': 
    for (var key in transform) { 
     str += key + '(' + transform[key] + 'deg)' 
    } 
    return str; 
} 

function applyTransform() { 
    var transform = getTransform(); 
    el.style.webkitTransform = el.style.mozTransform = el.style.transform = transform; 
} 

function rotateABit() { 
    transform.rotate += 20; 
    applyTransform(); 
} 

Answer 3

fiddle

var spinner = (function transform() { 
    var rotateX = 0; 
    var rotateY = 0; 
    var rotateZ = 0; 

    var translateX = 0; 
    var translateY = 0; 
    var translateZ = 0; 

    var scaleX = 1; 
    var scaleY = 1; 
    var scaleZ = 1; 

    function transform(props) { 
     rotateX = props.rotateX ? props.rotateX : rotateX; 
     rotateY = props.rotateY ? props.rotateY : rotateY; 
     rotateZ = props.rotateZ ? props.rotateZ : rotateZ; 

     translateX = props.translateX ? props.translateX : translateX; 
     translateY = props.translateY ? props.translateY : translateY; 
     translateZ = props.translateZ ? props.translateZ : translateZ; 

     scaleX = props.scaleX ? props.scaleX : scaleX; 
     scaleY = props.scaleY ? props.scaleY : scaleY; 
     scaleZ = props.scaleZ ? props.scaleZ : scaleZ; 

     var css = ""; 
     css += "rotateX(" + rotateX + "deg) "; 
     css += "rotateY(" + rotateY + "deg) "; 
     css += "rotateZ(" + rotateZ + "deg) "; 
     css += "translateX(" + translateX + "px) "; 
     css += "translateY(" + translateY + "px) "; 
     css += "translateZ(" + translateZ + "px) "; 
     css += "scaleX(" + scaleX + ") "; 
     css += "scaleY(" + scaleY + ") "; 
     css += "scaleZ(" + scaleZ + ") "; 

     spinner.Spinner.css("-webkit-transform", css); 
    } 
    return { 
     Spinner: $("#spinner"), 
     Transform: transform 
    } 
})(); 

Answer 4

這是我做過什麼和它的工作，再加上它是非常簡單的：對象的

1.轉換變換屬性字符串

var currentTransformation = String(myobject.style.transform); 

2.替代的價值要轉化

var finalTransformation = currentTransformation.replace("translateZ(100px)", "translateZ(YOURVALUEpx)"); 

3.分配新改造

myobject.style.transform = finalTransformation; 

完成！