javascript - 如何在保留其他值的同时设置单个变换值？

Question

如果您有一个元素具有许多用于转换的值，您如何只更改其中一个值而不更改其他值？

您可以每次都重写它们，但在某些情况下，这意味着您必须将 css 解析为不同的部分。例如：

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

您必须获取rotate 和rotateY 的属性和值。有没有办法在不改变rotateY值的情况下获取和设置只是旋转？

问题在这里得到说明。

Answer 1

无法直接修改转换的单个组件。可悲的是，各种可能的转换都是作为transform属性值实现的，而不是属性本身。CSS 属性值没有对象模型 - 就 JavaScript 而言，属性值始终只是一个字符串。如果将transform其视为诸如 、 等的简写属性，transform-rotate-y那就transform-*太好了，就像background所有属性的简写属性一样background-*。这将允许我们通过 JavaScript 直接访问这些值，但它不是以这种方式实现的，所以我们不走运。

编辑： 完成此任务的最简单方法（无需研究规范并进行大量数学运算）是嵌套您的元素，对每个. 如果您应用了几个不会改变的转换，请继续将它们组合到一个元素上。您确实想要更改的任何转换，请使用单独的元素：

在这里工作：jsfiddle.net/mkTKH/15

---

编辑：我下面的原始解决方案不起作用。在测试它时，我发现getComputedStyle()将转换转换为matrix(). 该规范的早期草案说：

transform由返回的样式对象的属性getComputedStyle包含一个 CSS_MATRIX 类型的 CSSTransformValue。6 个参数表示 3x2 矩阵，它是应用属性中列出的各个函数的结果transform。

---

所以，你必须解析它。如果您只想更改属性值的一部分，可以使用正则表达式来解析该值：

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

这就是我所做的，而且它很有效，而且非常简单：

1. 将对象的转换属性转换为字符串

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

2.替换你想要转换的值

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

3.分配新的转换

myobject.style.transform = finalTransformation;

完毕！

Answer 4

我对这个 jQuery插件有最好的体验。

这是一个例子。

甚至这里是一个在 jQuery 动画函数中使用的例子。

Answer 5

小提琴

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
    }
})();