How to check element have transform properties with jquery?

Question

I want to check when custom-class has style transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);

I have check stackoverflow demo but its only work for opacity in my case but i can't check for transform css properties.

 if( $('.custom-class').css('opacity') == '1' ) { console.log('It opacity checked'); } else { console.log('It opacity unchecked '); } if( $('.custom-class').css('transform') == 'translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1)' ) { 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>

Answer 1

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>