Как отобразить div под углом наклона в Internet Explorer

#jquery #css #internet-explorer #html

#jquery #css #internet-explorer #HTML

Вопрос:

Я разработал веб-сайт для клиента и создал его для них. Он почти завершен (ну, он завершен, если вы посмотрите на него с помощью Chrome или Firefox).

Часть дизайна показывает своего рода фотографию polaroid в верхнем левом углу экрана под углом. Он состоит из Div и изображения. Код на данный момент заставляет div наклоняться под углом, в то время как изображение внутри изменяется.

Однако код, используемый:

 transform: rotate(-7deg);
-webkit-transform: rotate(-7deg); /* Safari and Chrome */
-o-transform: rotate(-7deg); /* Opera */
-moz-transform: rotate(-7deg); /* Firefox */
 

Не работает ни в одной версии Internet Explorer. Клиент, хотя и использует Internet Explorer, доставляет мне массу огорчений, потому что они действительно хотят, чтобы это выглядело так. (Этот клиент, кстати, является типичным типом пользователя «форма над функцией»).

Что я мог бы сделать, чтобы div наклонялся под углом?

Редактировать:

Я использовал плагин CssSandpaper, и он делает то, что мне нужно, вплоть до определенного момента.

Здесь вы можете видеть, что изображение озаглавлено так, как мне нужно. Однако с помощью плагина cycle, который я использую, при изменении изображения оно исчезает, а затем появляется снова. Я не знаю, что это вызывает?

Ответ №1:

IE8 и ниже не поддерживают rotate свойство. Итак, для этого вам нужно использовать IE filter , называемый matrixfilter

попробуйте это :

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

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.992546151641322,
            M12=0.12186934340514761,
            M21=-0.12186934340514761,
            M22=0.992546151641322,
            SizingMethod='auto expand');
 

и вы можете сгенерировать filter отсюда:

http://www.useragentman.com/IETransformsTranslator/index.html

Комментарии:

1. Я пробовал это, и это сработало до определенной степени. Как я уже сказал, изображения внутри div, которые необходимо наклонить, являются частью слайд-шоу. В данный момент с матричным кодом изображение отображается без наклона, затем оно наклоняется.

2. можете ли вы показать свой html и css-код. Итак, легко понять, чего вы хотите.