Stackoverflow - How to add a rotated image in CSS?

http://stackoverflow.com/q/8939161/918414

HTML

<table>
    <tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
        

       
           

            
            
                        
            
            
            
            
            
            
            
            
            
            




    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
























































































































    
<script>

/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */

var headerUri = 'http://stackoverflow.com/q/8939161/918414',
    headerCaption = 'How to add a rotated image in CSS?';
    
document.body.insertAdjacentHTML( 
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: black;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255,...

CSS

#cell {
    background-image: url(http://thinkingstiff.com/images/matt.jpg); 
    background-repeat: no-repeat;
    background-size: contain;
    color: white;
    height: 150px;
    transform: rotate(200deg);
        -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -o-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
    width: auto;
}

#cell div {
    transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
}