Diagonal line inside div auto-noprefix

HTML

<div id="rectangle" class="rectangle">
    <div  id="diagonal"  class="diagonal"></div>
</div>

CSS

.rectangle
{   
    width: 300px;
    height: 150px;
    background-color: yellow;
    
}

.diagonal
{

    height: 1px;
    background-color: black;
    transform-origin: 0% 0%;
    
        transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
       
}

JavaScript

//http://jsfiddle.net/LWAKn/
var e =  document.getElementById('rectangle'); 
var line =  document.getElementById('diagonal'); 

//alert(e.id);


var w= e.offsetWidth;//width
var h = e.offsetHeight;//height
var diagonalWidth = function(w, h){
return Math.sqrt(Math.pow(h,2) + Math.pow(w,2))
}
//var angle = Math.asin(h/Math.sqrt(Math.pow(h,2) + Math.pow(w,2)))
var angle =  (180 / Math.PI) *  Math.asin(h/diagonalWidth(w, h));
line.style.width = diagonalWidth(w, h) + 'px';

//NG:
//$('line').css(newCss)
//$('#line').rotate({angle:20})
 
 //this works:
 //var rotateCSS = 'rotate(' + angle + 'deg)';
//     $('#diagonal').css({
  //    rotateCSS,
   //   '-webkit-transform': rotateCSS
   // });
    
    //OK:
      $('#diagonal').css({'transform': 'rotate(' + angle + 'deg)'});