Smoothed edges for rotated images

by Schepp

HTML

<div class="rotated"></div>

CSS

body {
    margin: 80px;
}

.rotated {
    width: 300px;
    height: 300px;
    background: #C00;
    
    /* 6° Rotation via CSS3 Transforms */
    -webkit-transform: rotate(6deg); /* Safari + Chrome */
    -moz-transform: rotate(6deg); /* Mozilla Firefox */
    -o-transform: rotate(6deg); /* Opera */
    -ms-transform: rotate(6deg); /* IE9+ */
    transform: rotate(6deg); /* W3C */
    
    /* 6° Rotation via IE Matrix Filter, IE6-9 */
    filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9945218953682733, 
            M12=-0.10452846326765346, 
            M21=0.10452846326765346, 
            M22=0.9945218953682733, sizingMethod='auto expand');
    
    /* Ohne zoom gehen Filter und Inline-Block nicht in IE6/7 */
    zoom: 1;
}

.kitten:nth-of-type(1n) {
    /* Deaktivieren des Filters in IE9, 
    der ja CSS Transforms beherrscht */
    filter: none;
}