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

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包含单个CSSTransformValue,其类型为CSS_MATRIX.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();
}