Using CSS Transform Property in Jquery

Using css transform property in jQuery

If you want to use a specific transform function, then all you need to do is include that function in the value. For example:

$('.user-text').css('transform', 'scale(' + ui.value + ')');

Secondly, browser support is getting better, but you'll probably still need to use vendor prefixes like so:

$('.user-text').css({
  '-webkit-transform' : 'scale(' + ui.value + ')',
  '-moz-transform'    : 'scale(' + ui.value + ')',
  '-ms-transform'     : 'scale(' + ui.value + ')',
  '-o-transform'      : 'scale(' + ui.value + ')',
  'transform'         : 'scale(' + ui.value + ')'
});

jsFiddle with example: http://jsfiddle.net/jehka/230/

JQuery CSS Transform Scale Property not working

I've actually tested below and seems to be working?

$('.sc-bar').css('transform','scaleY(0.5)');

Is the line enclose on $(document).ready() or made sure that jQuery is loaded before using this like below?

// A $( document ).ready() block.
$(document).ready(function() {
    // your code here...
    $('.sc-bar').css('transform','scaleY(0.5)');
});

How to add css transform to the current transform value Using jquery?

you can do something like this :

var css = $('.div-1').css("transform");
css = css+" scale(-1,1)";
$('.div-1').css('transform',css);

JQuery set CSS Transform, Translate Properties in Class

I think important thing about css method is that it is not changing your class property, but it is changing style property of object that you are calling it on.

This will do:

$( document ).ready(function() {
    $('.buttonHolder').click(function(){
        $(this).find("span").toggleClass('fadeText');
        var button = $(this).find("button");
        button.toggleClass('shrink');

        var position = $('.target').position();
        var left = position.left + 'px';
        var top = position.top + 'px';

        var buttonHolder = $(this);

        setTimeout(function() {
            buttonHolder.css({'transform' : 'translate(' + left +', ' + top + ')'});
        }, 1000);
    });
});

Transform in jQuery

Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome 

To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation
Where #myImage is the id of the element you want rotated.

To animate rotation, you can use setTmeout ex:

setTimeout(function() { $('#myImage').rotate(30) },5)

Get CSS transform property with jQuery

$('.foo').click(function() {
    var current_pull = parseInt($('.form-con').css('transform').split(',')[5]);
});

Get CSS transform value with jQuery

Try This:

$(document).ready(function(){    var res = '';    var str = $('.test').css('transform');    var x = str.split(',');    var len = x.length;    res += parseInt(x[len-2]) + " " + parseInt(x[len-1]) + " " + parseInt(x[len-3]);    alert(res);     })

.test {    transform:translate(22px,6px) scale(1) ;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="test"> my text</div>

css transform property not working on element as expected

Replace the unset values with blanks "". When you use unset it looks as if the styles go out like a chain reaction (cascading perhaps?). Anyways, when toggling between display:none, it's common practice to use "" blanks because that'll trigger default display(initial)

CODEPEN

    $('.open-menu').css('display','');
    $('.close-menu').css('display','none');

} else {    // Expanded

    $('.open-menu').css('display','none');
    $('.close-menu').css('display','');

How to check element have transform properties with jquery?

The jQuery .css method (as a getter, not a setter) uses the getComputedStyle() internally

From MDN (emphasis mine):

Get the value of a computed style property for the first element in
the set of matched elements or set one or more CSS properties for
every matched element.

So $('.custom-class').css('transform') is actually self.getComputedStyle(document.querySelector('.custom-class')).getPropertyValue('transform')

For performance reasons this is a matrix value. Your transformation is the non translating identity transformation (don't scale, skew or rotate and don't translate), which is the matrix value of matrix(1, 0, 0, 1, 0, 0)

If you want to have the real value of the style, you need to use VanillaJS document.querySelector('.custom-class').style.transform instead

Or just compare with the matrix value

// ...
if( $('.custom-class').css('transform') == 'matrix(1, 0, 0, 1, 0, 0)' ) {
// ...

if( $('.custom-class').css('opacity') == '1' ) {
   console.log('It opacity checked');
} else {
   console.log('It opacity unchecked ');
}
console.log(self.getComputedStyle(document.querySelector('.custom-class')).getPropertyValue('transform'))
console.log($('.custom-class').css('transform'))
console.log(document.querySelector('.custom-class').style.transform)

if( $('.custom-class').css('transform') == 'matrix(1, 0, 0, 1, 0, 0)' ) {
   console.log('It transform checked');
} else {
   console.log('It transform unchecked');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="custom-class" style="opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);"></div>

---

Related Topics