Getting height of rotated element?

HTML

<div id="console"></div>
<div id="diamond">as asd as das dasd as das da das dasd as dasd as dasd </div>

CSS

#diamond {
    position: relative;
    top: 40px;
    left: 120px;
    
    width: content-max;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    background-color: green;
}

JavaScript

// get the transform matrix
var matrix = 
    $('#diamond').css('-webkit-transform') ||
    $('#diamond').css('-moz-transform') ||
    $('#diamond').css('-o-transform') ||
    $('#diamond').css('-ms-transform') ||
    $('#diamond').css('transform');

var matrixArr;
var origH = $('#diamond').outerHeight();
var origW = $('#diamond').outerWidth();

var H = origH;

if(matrix && matrix !== 'none') {
    // For rotattion: [cos, -sin, sin, cos, 0, 0]
    matrixArr = matrix.substr(7, matrix.length - 8).split(', ');
    // w * sin + h * cos
    H = origH * matrixArr[1] + origW * matrixArr[3];
}

$('#console').html('Height: ' + H + ',<br>matrix = ' + matrix);