Как читать отдельные значения преобразования в JavaScript?

Question

Как читать отдельные значения преобразования в JavaScript?

В блоге Webkit за прошлый год о 3D-преобразованиях объясняются различные «функции» преобразования, которые можно использовать в - Свойство webkit-transform. Например:

#myDiv {
  -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
}

Мой вопрос: как вы получаете доступ к отдельным значениям в JavaScript? Когда вы читаете свойство webkitTransform элемента, вы просто получаете функцию matrix3d () с 16 значениями в ней, например так ...

matrix3d(0.958684, 0.000000, .....)

Есть ли способ просто прочитать значение отдельной вещи преобразования, как rotateY ()? Или мне нужно прочитать его из строки matrix3d () и как?

16

javascript 3d webkit css3 transform

задан vsync 16 July 2016 в 10:16

4 ответа

Другие вопросы по тегам:

javascript 3d webkit css3 transform

Похожие вопросы:

score 2 · Answer 1

Эта ссылка из справочника разработчиков Apple может пролить больше света на эту тему:

Свойство webkitTransform является строковое представление списка преобразование операций. Обычно это список содержит единственную матрицу операция преобразования. Для 3D трансформируется, значение равно "matrix3d (...)" с 16 значениями однородная матрица 4x4 между скобки. Для 2D-преобразований значение - строка "матрица (...)" содержащий 6 векторных значений.

score 3 · Answer 2

Я думаю, как говорит syockit, итерация по таблицам стилей - единственный способ пойти, вы можете использовать webkitMatchesSelector , чтобы найти правила, которые соответствуют вашему элементу:

var theRules = new Array();
var theStylesheet = document.styleSheets;
if (document.styleSheets[0].cssRules)
        theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
        theRules = document.styleSheets[0].rules

var elem = document.getElementById("myDiv");

for (var i=0; i < theRules.length; i++) {
    if (elem.webkitMatchesSelector(theRules[i].selectorText)) {
        var theStyles = theRules[i].style;
        var j = theStyles.cssText.indexOf('-webkit-transform:');
        if (j>-1) {
            var s = theStyles.cssText.substring(j,theStyles.cssText.length).indexOf(';'); 
            document.getElementById("output").innerHTML=theStyles.cssText.substring(j+18,s);
        }
    }
}

Это предполагает разметку примерно так, я добавил несколько дополнительных правил и значений, чтобы убедиться, что я выбираю правильные значения. Если у вас более одной таблицы стилей, вам необходимо настроить первую часть для итерации по всем таблицам стилей, и вам, вероятно, придется иметь дело со спецификой, если ваш -webkit-transform появляется более чем в одной правило:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Get style</title>
    <style>
    div {
        margin: 2em;
        padding: 2em;
    }
    #myDiv {
        -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
        border: 1px solid;
    }
    </style>
</head>
<body>
    <div id="myDiv">
        Just testing.
    </div>
    <div id="output">
    </div>
</body>
</html>

score 1 · Answer 3

Поскольку вы получаете окончательное значение матрицы только из вычисленного стиля, вам, возможно, придется проверить встроенный стиль элемента или правила таблицы стилей. Если element.style.webkitTransform ничего не дает, можно перебрать все таблицы стилей документа и посмотреть, какая из них соответствует вашему элементу. Затем вы можете переписать свойство webkitTransform, чтобы получить/установить значение.

score 0 · Answer 4

Я подумал об одной возможности. Если вы готовы разбирать строки на JavaScript, используйте

data=document.getElementById("myDiv").getAttribute("-webkit-transform");

затем интерпретируйте data.