jQuery UI Dialog Random CSS attribute

Question

it is my first post here, so I hope to do it correctly. I'm trying to assign a random value to a series of dialog widget in order to skew each of them differently between 0 and 10deg. Unfortunately it is not working. Do anyone have an idea?

<div id="dialog" class="pops" title="1"> <img src="print1.jpg"></img>
</div>

<div id="dialog2" class="pops" title="2"> <img src="print2.jpg"></img>
</div>

<div id="dialog3" class="pops" title="3"><img src="print3.jpg"></img>
</div>

JQuery (dialog and addClass)

$( function() {
$( ".pops" ).dialog({
draggable: false,
resizable: false,
width: 'auto',
height: 'auto',
modal: true,
dialogClass:'storto',

open: function( e, ui ) {
    $( this ).siblings( ".ui-dialog-titlebar" )
  .find( "button" ).blur();
}
});
} );

CSS

.ui-dialog.storto{
padding:0;
height:auto;
margin:0;
transform: skewY(10deg);
}

jQuery to change CSS (not working)

$(".ui-dialog.storto").each( function() {
var rNum = (Math.random()*4)-2;  
$(this).css( {   
'transform': 'skewY('+rNum+'2deg)'
} );  
} );

Answer 1

Alright, did it.

open: function( e, ui ) {
$(".ui-dialog.storto").each( function() {
var rNum = (Math.random()*10)-1;
$(this).css( {
'transform': 'skewY('+rNum+'2deg)'
} );
} );
}