Ensuring the picture remains in a table cell after rotate/transform

Question

I'm using JavaScript & Css to try and rotate pictures. I'm also resizing the cell in the table to allow the picture to fit with its new orientation, but I cannot get the picture to sit nice in the cell, it always seems to overlap(see picture). I've been playing around with css transform-origin but I just can't find that sweet spot and I was wondering if anyone can suggest an easier way of getting this to play nice as I'm assuming different sized images will need a unique transform-origin. I'm learning JavaScript and more advanced Css as I go.

.north {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
transform-origin: 50% left;
}
.west {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
transform-origin: width: calc(bottom + 100px) left;
}
.south {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
transform-origin: 50% left;
}
.east {
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
transform-origin: 50% left;
}

Here's the JScript

function rotateImage(elementID, cellID, buttonsID) {
    alert( 'Rotating' + elementID + "Resizing" + cellID);
    alert(document.getElementById(elementID).className);

    var img = document.getElementById(elementID);
    var height = img.clientHeight;
    var width = img.clientWidth;

    alert('Height = ' + height + 'width = ' +width);

    if(document.getElementById(elementID).className == "north"){
        alert('changing to west');
        document.getElementById(elementID).className = 'west';
        document.getElementById(cellID).style.height = width +30;
    }
    else if(document.getElementById(elementID).className == 'west'){
        alert('changing to south');
        document.getElementById(elementID).className = 'south';
        document.getElementById(cellID).style.height = height;
        document.getElementByID(buttonsID.className = 'editButtons');
    }
    else if(document.getElementById(elementID).className == 'south'){
        alert('changing to east');
        document.getElementById(elementID).className = 'east';
        document.getElementById(cellID).style.height = width + 30;
        document.getElementByID(buttonsID.className = 'editButtons');
    }
    else if(document.getElementById(elementID).className =='east'){
        alert('changing to north');
        document.getElementById(elementID).className = 'north';
        document.getElementById(cellID).style.height = height;
        document.getElementByID(buttonsID.className = 'editButtons');
    }
}