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

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

Вот сервис? который генерит стили и для нормальных браузеров, и для старых ИЕ — 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;

}

#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;

}

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

Similar Posts

LEAVE A COMMENT Отменить ответ