Повернуть картинку при помощи css

• 12, 06, 2012
•  bullgare
•  HTML and CSS
• No Comments.

Проблема, как всегда, в ИЕ.

Вот сервис? который генерит стили и для нормальных браузеров, и для старых ИЕ — http://www.useragentman.com/IETransformsTranslator/
На выходе получаем что-то вроде:

#transformedObject {
     width:             220px;
     height:            70px;

     -moz-transform:    rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     -o-transform:      rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     -webkit-transform: rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     transform:         rotate(15deg)
                         translateX(230px)
                         scale(1.5);
}

/*
 * The following two rules are for IE only and
 * should be wrapped in conditional comments.
 * The -ms-filter rule should be on one line 
 * and always *before* the filter rule if
 * used in the same rule.
 */

#transformedObject {

   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
   
   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1.4488887394336025,
            M12=-0.388228567653781,
            M21=0.388228567653781,
            M22=1.4488887394336025,
            SizingMethod='auto expand');


   /*
    * To make the transform-origin be the middle of
    * the object.    Note: These numbers
    * are approximations.  For more accurate results,
    * use Internet Explorer with this tool.
    */
   margin-left: 58px; 
   margin-top: -32px;

}