Проблема с вращением преобразования + IE9/10

Надеюсь, кто-то может направить меня в правильном направлении, поскольку я пытался выполнить эту задачу в течение нескольких часов и, похоже, не могу придумать работающую кросс-браузерную комбинацию CSS/Javascript.

По сути, то, что я пытаюсь сделать, - это «переворот карты» с использованием CSS и Javascript. Код прекрасно работает в Google Chrome, но я не могу заставить его работать в IE9/10. Вот пример jsFiddle.

При просмотре того же jsfiddle в IE10 вы видите только обратную сторону карточки и анимация не работает.

Какие-либо предложения?

Ignore this - need a code snippet to post the above jsFiddle link.

javascript css transform
person Justin    schedule 22.08.2013    source источник
comment
зачем помещать этот глупый игнор в этот бит? вы могли бы так же легко поместить копию кода jsfiddle (или соответствующую его часть, если она слишком велика).   -  person Spudley    schedule 22.08.2013
comment
Я подумал, что это усложнит этот пост, когда вы можете просто щелкнуть ссылку jsFiddle, чтобы увидеть весь скрипт в действии. Я чувствовал, что это не нужно, хотя я понимаю его цель.   -  person Justin    schedule 22.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

Пример jsFiddle работает только для Chrome (точнее, браузеров webkit). Это вполне логично, так как здесь используются только свойства css -webkit.

Анимация Card Flip, которую вы хотите использовать, также должна отлично работать для IE10 (и Firefox даже не упоминается в вашем вопросе)

Посетите страницу W3school для получения более подробной информации о свойствах CSS 3D Transforms, которые вам понадобятся использовать.

Теперь проблема: IE9.

  1. IE9 не поддерживает анимацию CSS. Вам придется использовать запасной вариант с Javascript (jquery animate).
  2. IE9 не предоставляет возможности поворота. НО, он обеспечивает flipX. Да, у вас не будет 3D-эффекта, но у вас все равно будет эффект флипа.

Свойство flip IE9

filter: FlipH;
-ms-filter: "FlipH";
person PIIANTOM    schedule 22.08.2013
comment
Спасибо ПИАНТОМ. Я думаю, это имеет смысл! Я знал, что могу выполнить эту анимацию в IE10 с дополнительным кодом (я искал не в том месте), но не знал, что делать в IE9. Ваш приведенный выше код очень поможет! Спасибо! - person Justin; 22.08.2013