У меня есть стиль CSS для слоя:
.element {
-webkit-transform: rotate(7.5deg);
-moz-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
transform: rotate(7.5deg);
}
Есть ли способ получить текущее значение вращения через jQuery?
Я пробовал это
$('.element').css("-moz-transform")
Результат matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px), который не говорит мне многого. Я хочу получить 7.5.
Здесь мое решение с помощью jQuery.
Это возвращает числовое значение, соответствующее вращению, применяемому к любому элементу HTML.
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return (angle < 0) ? angle + 360 : angle;
}
angle1 = getRotationDegrees($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));
и т.д...
Я нашел ошибку/функции в коде Twist: функция возвращает отрицательные углы.
Итак, я добавляю простую строку кода перед возвратом angle:
if(angle < 0) angle +=360;
Чем будут получены результаты:
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
if(angle < 0) angle +=360;
return angle;
}
Вот подключаемая версия функции Twist. Кроме того, условная if (matrix! == 'none') не работала для меня. Поэтому я добавил проверку типов:
(function ($) {
$.fn.rotationDegrees = function () {
var matrix = this.css("-webkit-transform") ||
this.css("-moz-transform") ||
this.css("-ms-transform") ||
this.css("-o-transform") ||
this.css("transform");
if(typeof matrix === 'string' && matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return angle;
};
}(jQuery));
Используйте следующее:
var rotation = $('img').rotationDegrees();
Свойство tranform CSS всегда возвращает значение матрицы, так как вращение, перекос, масштаб и т.д. является просто сокращением для облегчения работы и не требует вычисления значения матрицы каждый раз, однако матрица вычисляется браузером и применяется как матрица, и когда это будет сделано, он больше не сможет вернуть повернутую степень на угол, не пересчитывая матрицу обратно.
Чтобы сделать такие вычисления проще, есть библиотека javascript, называемая Sylvester, которая была создана с целью простого вычисления матрицы, попробуйте взглянуть на что для получения степени вращения от значения матрицы.
Кроме того, если вы хотите написать функцию поворота в javascript для перевода степеней вращения в матрицу, это, вероятно, будет выглядеть примерно так (это использует сильвестр для последнего вычисления):
var Transform = {
rotate: function(deg) {
var rad = parseFloat(deg) * (Math.PI/180),
cos_theta = Math.cos(rad),
sin_theta = Math.sin(rad);
var a = cos_theta,
b = sin_theta,
c = -sin_theta,
d = cos_theta;
return $M([
[a, c, 0],
[b, d, 0],
[0, 0, 1]
]);
}
};
Теперь все, что вам действительно нужно сделать, - это обратная модификация этой функции, и вы золотой: -)
Мое решение (с помощью jQuery):
$.fn.rotationInfo = function() {
var el = $(this),
tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
info = {rad: 0, deg: 0};
if (tr = tr.match('matrix\\((.*)\\)')) {
tr = tr[1].split(',');
if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
info.rad = Math.atan2(tr[1], tr[0]);
info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
}
}
return info;
};
Использование
$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5
Этот script очень полезен https://github.com/zachstronaut/jquery-css-transform
Если вы это сделаете так, как вы описали, это единственное место, где вы фактически изменяете преобразование объекта, тогда, поскольку ваш браузер не может быть одновременно одним из четырех видов браузеров, некоторые из префиксных значений вы назначены по-прежнему точно так, как вы их назначили.
Например, если вы используете webkit, то this.css('-o-transform') по-прежнему будет возвращать 'rotate(7.5deg) ', поэтому это просто вопрос соответствия ему /rotate\((.*)deg\)/.
Это сработало для меня: я всегда назначаю 5 стилей CSS и читаю все пять стилей, надеясь, что хотя бы один из них останется нетронутым. Я не уверен, что это работает, если стили установлены в CSS (не в JS).
Также вы можете заменить var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); на var angle = Math.round(Math.acos(a) * (180/Math.PI));
Поскольку мне постоянно нужно использовать jQuery вместе с TweenMax, и поскольку TweenMax уже позаботился обо всех синтаксических анализах различных типов строк преобразования, а также о проблемах совместимости, я написал крошечный плагин jquery здесь (больше обтекания gsap), которые могут напрямую обращаться к этим значениям следующим образом:
$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x') // returns value of translate-x
Список свойств, которые вы могли бы получить/установить вместе со своими начальными свойствами:
perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0
Вставьте из моего другого ответа, надеюсь, что это поможет.
Я сделал скрипку с этим рабочим кодом, чтобы получить rotateX Y Z на 3D или rotateZ для 2D-преобразования. Благодаря mihn для базового кода, который я мало обновил с помощью jQuery 2.2.3. В настоящее время я использую это решение для своих собственных проектов.
https://jsfiddle.net/bragon95/49a4h6e9/
//
//Thanks: Adapted on base code from mihn http://stackoverflow.com/a/20371725
//
function getcsstransform(obj)
{
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);
var TType="undefined",
rotateX = 0,
rotateY = 0,
rotateZ = 0;
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if (matrix!==undefined && matrix !== 'none')
{
// if matrix is 2d matrix
TType="2D";
if (matrix.indexOf('matrix(') >= 0)
{
var values = matrix.split('(')[1].split(')')[0];
if (isIE) //case IE
{
angle = parseFloat(values.replace('deg', STR_EMPTY));
}else
{
values = values.split(',');
var a = values[0];
var b = values[1];
var rotateZ = Math.round(Math.atan2(b, a) * (180 / Math.PI));
}
}else
{
// matrix is matrix3d
TType="3D";
var values = matrix.split('(')[1].split(')')[0].split(',');
var sinB = parseFloat(values[8]);
var b = Math.round(Math.asin(sinB) * 180 / Math.PI);
var cosB = Math.cos(b * Math.PI / 180);
var matrixVal10 = parseFloat(values[9]);
var a = Math.round(Math.asin(-matrixVal10 / cosB) * 180 / Math.PI);
var matrixVal1 = parseFloat(values[0]);
var c = Math.round(Math.acos(matrixVal1 / cosB) * 180 / Math.PI);
rotateX = a;
rotateY = b;
rotateZ = c;
}
}
return { TType: TType, rotateX: rotateX, rotateY: rotateY, rotateZ: rotateZ };
};
mAngle = getcsstransform($("#Objet3D"));
if (mAngle.TType=="2D")
{
$("#Result").html("Transform 2D [rotateZ=" + mAngle.rotateZ + "°]");
}else
{
$("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "°|rotateY=" + mAngle.rotateY + "°|rotateZ=" + mAngle.rotateZ + "°]");
}