Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get CSS transform property with jQuery

Tags:

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.

like image 722
colmtuite Avatar asked Feb 24 '14 12:02

colmtuite


People also ask

How do I retrieve the properties of a CSS element?

Get a CSS Property Value You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax: $(selector). css("propertyName");

How to add transform using jQuery?

Set transform with a stringcss('transform', 'translate(50px, 30px) rotate(25deg) scale(2,. 5) skewX(-35deg)'); $(elem). animate({transform: 'translateY(-100px) rotate(1rad) scaleX(2) skewY(42deg)'});

How to use transform rotate in jQuery?

$(function() { var $elie = $("#bkgimg"); rotate(45); function rotate(degree) { // For webkit browsers: e.g. Chrome $elie. css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); // For Mozilla browser: e.g. Firefox $elie. css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); } });

What is the use of CSS () method in jQuery?

jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. When used to return properties: This method returns the specified CSS property value of the FIRST matched element.


1 Answers

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 
like image 167
Milind Anantwar Avatar answered Oct 20 '22 05:10

Milind Anantwar