Skip to main content

Transform Property Using JQuery

Saurabh Dhariwal

Saurabh Dhariwal

2min 5 sec
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!