Smoothed edges for rotated images

by Schepp

HTML

<div class="kitten"></div>

CSS

body {
    margin: 80px;
}

.kitten {
    width: 200px;
    height: 300px;
    background: url('http://placekitten.com/200/300');
    
    -webkit-background-clip: padding-box; /* IOS fix */
    background-clip: padding-box; /* IOS fix */
    
    /* Damit das Element überhaupt rotiert, muss es auf 
    display: block o. display: inline-block gesetzt werden */
    display: inline-block;
    
    /* Inline-Block für IE6/7 über display: inline + zoom: 1 
    per Stern-Hack nur sichtbar für IE6/7 */
    *display: inline;
    
    /* 6° Rotation via CSS3 Transforms */
    -webkit-transform: translate3d(0,0,0) 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;
}