CSS3 анимация при трансформации: поворот. Способ получения текущего градуса вращающегося элемента?

Question

Я работаю над интерфейсом html5, который использует перетаскивание. Когда я перетаскиваю элемент, цель получает css-класс, который заставляет его вращаться в двух направлениях благодаря -webkit-animation.

@-webkit-keyframes pulse {
   0%   { -webkit-transform: rotate(0deg);  }
   25%  { -webkit-transform:rotate(-10deg); }
   75%  { -webkit-transform: rotate(10deg); }
   100% { -webkit-transform: rotate(0deg);  }
  }

.drag
{
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

Когда я опускаю цель, я хочу, чтобы она приняла текущее состояние вращения.

Моей первой мыслью было проверить свойство css с помощью jquery и метода .css ('- webkit-transform'). Но этот метод просто возвращает «none».

Итак, мой вопрос: есть ли способ получить текущее значение градуса элемента, который вращается с помощью анимации?

Спасибо, пока Хендрик

Answer 1

Мне недавно пришлось написать функцию, которая делает именно то, что вы хотите!Не стесняйтесь использовать его:

// Parameter element should be a DOM Element object.
// Returns the rotation of the element in degrees.
function getRotationDegrees(element) {
    // get the computed style object for the element
    var style = window.getComputedStyle(element);
    // this string will be in the form 'matrix(a, b, c, d, tx, ty)'
    var transformString = style['-webkit-transform']
                       || style['-moz-transform']
                       || style['transform'] ;
    if (!transformString || transformString == 'none')
        return 0;
    var splits = transformString.split(',');
    // parse the string to get a and b
    var parenLoc = splits[0].indexOf('(');
    var a = parseFloat(splits[0].substr(parenLoc+1));
    var b = parseFloat(splits[1]);
    // doing atan2 on b, a will give you the angle in radians
    var rad = Math.atan2(b, a);
    var deg = 180 * rad / Math.PI;
    // instead of having values from -180 to 180, get 0 to 360
    if (deg < 0) deg += 360;
    return deg;
}

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ Я обновил код для работы со строками matrix3d, но он все еще дает только 2d вращениеградусы (т.е. вращение вокруг оси Z).

Answer 2

window.getComputedStyle (element, null) ['- webkit-transform'] вернет строку, представляющую текущую матрицу преобразования.Вы можете вычислить степень его вращения по этой строке, сначала проанализировав ее, а затем применив к ней несколько математических выражений.