Get CSS transform property with jQuery – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and jquery. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Get CSS transform property with jQuery.
Problem :
I’m trying to get the -webkit-transform: translateY('') property in a variable.
HTML
<form class="form-con" style="-webkit-transform: translateY(-802px);"></form>
JS
$('.foo').click(function() {
var current_pull = parseInt($('.form-con').css('transform').split(',')[4]);
});
This is returning ‘0’, instead of the correct value.
Solution :
You can use:
var obj = $('.form-con');
var transformMatrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
var matrix = transformMatrix.replace(/[^0-9-.,]/g, '').split(',');
var x = matrix[12] || matrix[4];//translate x
var y = matrix[13] || matrix[5];//translate y
$('.foo').click(function() {
var current_pull = parseInt($('.form-con').css('transform').split(',')[5]);
});
I think the answer is here:
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;
return angle;
}
I think the order of properties is indeterminate.
var matrix = $obj.css('transform');
var translate = {};
// translateX
var matchX = matrix.match(/translateX((-?d+.?d*px))/);
if(matchX) {
translate.x = matchX[1];
}
// translateY
var matchY = matrix.match(/translateY((-?d+.?d*px))/);
if(matchY) {
translate.y = matchY[1];
}
console.log(translate);