Как установить одно значение transform, оставляя другие значения?

Если у вас есть элемент со многими значениями для преобразования, как изменить только одно из этих значений без изменения других значений?

вы можете переписывать их каждый раз, но в некоторых ситуациях это означает, что вам придется разбирать css для преобразования в разные его части. Например:

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

вам нужно будет получить свойство и значение для rotate и rotateY. Разве нет способа получить и установить просто поворот без изменения значения для rotateY?

проблема иллюстрируется здесь.

10
css javascript

5 ответов

нет способа напрямую изменить один компонент преобразования. К сожалению, различные возможные преобразования были реализованы как значения на transform атрибут, а не сами атрибуты. Нет объектной модели для значений атрибутов CSS-значения атрибутов всегда являются просто строкой, насколько это касается JavaScript. Было бы здорово, если бы ... --2--> рассматривался как атрибут стенографии для, например,transform-rotate-y, transform-* и т. д., Так же, как background - это стенография атрибут для всех background-* атрибуты. Это позволило бы нам получить прямой доступ к значениям через JavaScript, но это не было реализовано таким образом, поэтому нам не повезло.

Edit: самый простой способ сделать это (без изучения спецификации и выполнения кучу математики) было бы вложите свои элементы, применяя различные преобразования к каждому. Если вы применяете несколько преобразований, которые не изменятся, продолжайте и объедините их в одно элемент. Любое преобразование, которое вы хотите изменить, используйте отдельный элемент:

работает здесь:jsfiddle.net/mkTKH/15

Edit: мое оригинальное решение ниже не будет работать. Проверяя его, я обнаружил, что getComputedStyle() преобразует преобразование в matrix(). Ан ранний проект спецификации говорит:

на transform свойство объекта style, возвращаемое 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;
}

непроверенными.

7

итак, @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();
}
4

Это то, что я сделал, и она работала очень просто:

1. преобразование свойства преобразования объекта в строку

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

2. замените значение, которое вы хотите преобразовать

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

3. назначить новое преобразование

myobject.style.transform = finalTransformation;

готово!

1

скрипка

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

У меня есть лучший опыт работы с этим jQuery плагин.

здесь пример.

и даже здесь пример использования в функции анимации jQuery.

0