javascript - Not able to fetch inline transform scale using jquery -

i creating functionality wherein need fetch inline transform scale value each li.

below have created demo me out?

html

<div style="color:red;transform:scale(1);">dummy content</div> 

js

$(function(){    $('div').click(function(){    var trans=$('div').css('transform');    console.log(trans);     }); }); 

thanks in advance!

--------------------update------------------------

i think question didnt justify problem facing please check below codepen reference.

http://codepen.io/anon/pen/vozowv

below code available might not able check in codepen:

html

<ul>     <li class="image-container">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt" style="transform: scale(0.55); margin-top: -100px;">     </li>     <li class="image-container">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt" style="transform: scale(0.6); margin-top: -80px;">     </li>     <li class="image-container">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt" style="transform: scale(0.7); margin-top: -40px;">     </li>     <li class="image-container">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt" style="transform: scale(0.8); margin-top: 1px;">     </li>     <li class="image-container">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt" style="transform: scale(0.9); margin-top: 50px;">     </li>     <li class="image-container">         <img src="static/images/fileeebox/receipt.jpg" alt="receipt" style="transform: scale(1); margin-top: 100px;">     </li>     <li class="image-container">         <img src="static/images/fileeebox/receipt.jpg" alt="receipt" style="transform: scale(1.1); margin-top: 200px;">     </li>     <li class="image-container" style="display: none;">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt" style="transform: scale(1.1); margin-top: 200px;">     </li>     <li class="image-container" style="display: none;">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt" style="transform: scale(1.2); margin-top: 700px;">     </li>     <li class="image-container" style="display: none;">         <img src="http://a3.mzstatic.com/us/r30/purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="receipt">     </li> </ul> 

css:

ul li.image-container img {     max-width: 100%;     max-height: 100%;     margin: 0 auto;     box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);     transition: 600ms ease-in-out;     list-item-style:none; } ul li.image-container:last-child img {     transform: scale(1.2);     margin-top: 700px; } ul li.image-container:nth-last-child(2) img {     transform: scale(1.1);     margin-top: 200px; } ul li.image-container:nth-last-child(3) img {     transform: scale(1);     margin-top: 100px; } ul li.image-container:nth-last-child(4) img {     transform: scale(0.9);     margin-top: 50px; } ul li.image-container:nth-last-child(5) img {     transform: scale(0.8);     margin-top: 1px; } ul li.image-container:nth-last-child(6) img {     transform: scale(0.7);     margin-top: -40px; } ul li.image-container:nth-last-child(7) img {     transform: scale(0.6);     margin-top: -80px; } ul li.image-container:nth-last-child(8) img {     transform: scale(0.55);     margin-top: -100px; } ul li.image-container:nth-last-child(9) img {     transform: scale(0.5);     margin-top: -120px; } ul li.image-container:nth-last-child(10) img {     transform: scale(0.45);     margin-top: -140px; } ul li.image-container:nth-last-child(n+10) img {     transform: scale(0.4);     margin-top: -155px; } 

js

$(function(){     $('img').click(function(){         var arrimages=$('li.image-container');         var length=arrimages.length;         var lastelement=$(arrimages).find(':visible').last();         var i;         for(i=length-1;i>=0;i--){             var obj=$(arrimages[i]);             var prevmargin=$(obj).eq(i-1).find('img').css('margin-top');             var prevscale=$(obj).eq(i-1).find('img').css('transform');             alert(prevmargin);             alert(prevscale);         }     }); }); 

-- update

ok, since not obvious info in previous post putting update of answer here. should looking for.

$(function() {   $('img').click(function(){     var arrimages = $('li.image-container');     var length = arrimages.length;     var lastelement = $(arrimages).find(':visible:last');     var i;     for( = length -1; >= 0; i-- ) {       var obj = $(arrimages[i]);       if (i < length - 2 && !== 0) {         var prevmargin = arrimages.eq(i - 1 ).find('img').css('margin-top');         var prevscale = arrimages.eq(i - 1 ).find('img').css('transform');         console.log(prevscale);       }     }   }); });