jquery - rotate - transform javascript

Obtener elemento-moz-transform: rotar el valor en jQuery

Question

Tengo estilo CSS para una capa:

.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);
}

¿Hay alguna manera de obtener el valor de rotación de curado a través de jQuery?

Intenté esto

$(''.element'').css("-moz-transform")

El resultado es una matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px) que no me dice mucho. Lo que busco es 7.5 .

Answer 1

Aquí está mi solución usando jQuery.

Esto devuelve un valor numérico correspondiente a la rotación aplicada a cualquier elemento 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''));

etc ...

Answer 2

Aquí hay una versión de plug-in de la función de Twist. Además, el condicional if (matrix! == ''none'') no funcionó para mí. Así que he agregado la verificación de tipos:

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

Use de la siguiente manera:

var rotation = $(''img'').rotationDegrees();

Answer 3

Como siempre necesito usar jQuery junto con TweenMax y como TweenMax ya se encargó de todo el análisis de varios tipos de cadenas de transformación y problemas de compatibilidad, escribí un pequeño complemento de jquery here (más un resumen de gsap) que podría Acceda directamente a estos valores de esta manera:

$(''#ele'').transform(''rotationX'') // returns 0
$(''#ele'').transform(''x'') // returns value of translate-x

La lista de propiedades que puede obtener / establecer, junto con sus propiedades iniciales:

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

Pegar de mi otra respuesta, espero que esto ayude.

Answer 4

Este script es muy útil https://github.com/zachstronaut/jquery-css-transform

Answer 5

He encontrado un error / características en el código de Twist: la función devuelve ángulos negativos .

Así que agregué una línea simple de código antes de devolver el angle :

if(angle < 0) angle +=360;

Que los resultados serán:

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;
}

Answer 6

He hecho un violín con este código de trabajo para obtener rotateX YZ en 3D, o rotarZ para una transformación 2D. Gracias a mihn por el código base que tengo poco actualizado con jquery 2.2.3. Actualmente uso esta solución para mis propios proyectos.

https://jsfiddle.net/bragon95/49a4h6e9/

 //
//Thanks: Adapted on base code from mihn http://.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 + "°]");
}

Answer 7

La propiedad de tranformación de CSS siempre devolverá un valor de matriz, como rotar, sesgar, escalar, etc., es sólo una abreviatura para facilitar las cosas y no tener que calcular el valor de la matriz cada vez; sin embargo, el navegador calcula la matriz y la aplica como matriz y cuando se hace eso ya no puede devolver el grado girado por ángulo sin volver a calcular la matriz nuevamente.

Para facilitar tales calcualtions hay una biblioteca de JavaScript llamada Sylvester que se creó con el propósito de calcular la matriz fácil, trate de mirar eso para obtener el grado de rotación del valor de la matriz.

Además, si escribes una función de rotación en javascript para traducir grados rotacionales a una matriz, probablemente se vería algo así (esto usa sylvester para el último cálculo):

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]
]);
}
};

Ahora todo lo que tienes que hacer es invertir el enginer de esa función y estás dorado :-)

Answer 8

Si está dispuesto a usar el estilo en línea solo para esta transformación, puede usar jQuery para obtener el contenido de la etiqueta de estilo:

parseInt($( /*TODO*/ ).attr(''style'').split(''rotate('')[1].split(''deg)'')[0]);

Answer 9

Si hace esto de la forma que describió, este es el único lugar donde realmente modifica la transformación del objeto, ya que su navegador no puede ser de los 4 tipos de navegadores al mismo tiempo, algunos de los valores prefijados que le asignó son exactamente igual a como los asignaste. Así que, por ejemplo, si usa webkit, this.css(''-o-transform'') seguirá devolviendo ''rotate(7.5deg) '', por lo que solo es cuestión de compararlo con /rotate/((.*)deg/)/ .

Esto funcionó bien para mí: siempre asigno 5 estilos de CSS y leo los cinco estilos, con la esperanza de que al menos uno de ellos quede intacto. No estoy seguro de si esto funciona si los estilos están establecidos en CSS (no en JS).

Answer 10

También podría reemplazar var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); para var angle = Math.round(Math.acos(a) * (180/Math.PI));

Answer 11

Mi solución (usando 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;
};

Uso :

$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5