How to get actual (not original) height of a CSS-rotated element

http://stackoverflow.com/questions/9791403/how-to-get-actual-not-original-height-of-a-css-rotated-element

by GoranMottram

HTML

<div id="console"></div>
<div id="diamond"></div>

CSS

#diamond {
    position: relative;
    top: 30px;
    left: 100px;
    height: 50px;
    width: 50px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: green;
}

JavaScript

$('#console').text('Height: ' + $('#diamond').outerHeight());

var hypotenuse = Math.sqrt(Math.pow($('#diamond').height(), 2) + Math.pow($('#diamond').width(), 2));

$('#console').append('<br />Hypotenuse: ' + hypotenuse);