Get Value Of Transform Property Using jQuery

Get value of transform property using jQuery

When we write code such as

var transform_val = jQuery('.animation').css('transform');

it returns all value of transform property like rotate, translate, matrix, scale, skew etc.

But if you want to get single value of rotate, translate, matrix, scale, skew etc follow below code:

HTML

<div class="animation"></div>

CSS

.animation {
      display: inline-block;
      min-width: 100px;
      min-height: 100px;
      margin: 0;
      padding: 20px;
      background-color: #f2f2f2;
      -webkit-transform: translate(55px, 77px) translateZ(0);
      -moz-transform: translate(55px, 77px) translateZ(0);
      transform: translate(55px, 77px) translateZ(0);
    } 

JS Code

 /**
       * Get scale value of an element
       */
      var matrix = jQuery('.animation').css('-webkit-transform');
      var translate_val = matrix.match(/-?[\d\.]+/g);
      //var scroll_translate = translate_val[5];
      jQuery('.animation').text(translate_val);
      /* End */

Aha! So, isn't this super fast and easy?! Grab it and use it. Share your swifter experiences... Stay Tuned!

Need more assistance regarding Web Design Services Contact us now!