Я пытаюсь сделать эффект перелистывания страниц в IE10.
Поскольку IE10 не поддерживает transform-style: preserve-3d;, мне приходится переворачивать каждую сторону отдельно. Он хорошо работает в последних браузерах, но в IE10 перспектив нет. Если я пишу perspective: 1000px;
в контейнере (.flipper), backface-visibility/z-index работает неправильно.
Взгляните на этот jsfiddle: http://jsfiddle.net/wG6gk/2/
Я понятия не имею, почему у вас есть xpersepective в вашем CSS, IE10 не имеет префикса в CSS, однако свойство перспективы должно иметь какую-то единицу измерения глубины, perspective: 1000 не будет применяться, потому что браузер не знает, в какой единице он находится. , аналогично ширине и высоте и т. д., вы должны применять px, em и т. д. Единственными браузерами, которые принимают единицы (и в пикселях) для свойства perspective, являются браузеры Webkit, и только когда они находятся внутри свойства transform.
Если вы немного изучите себя, Microsoft заявляет:
Спецификация W3C определяет значение ключевого слова preserve-3d для этого свойства, которое указывает, что выравнивание не выполняется. В настоящее время Internet Explorer 10 не поддерживает ключевое слово preserve-3d. Вы можете обойти это, вручную применив преобразование родительского элемента к каждому из дочерних элементов в дополнение к обычному преобразованию дочернего элемента.
Так что пока вам просто нужно реализовать рекомендованное исправление, если вы хотите пойти по этому пути.
Если нет, то вам повезло. Я потратил время, пытаясь сделать переход плавным. Первоначально в своей скрипте вы очень неловко трансформировали ее и, на мой взгляд, использовали слишком много стилей, поэтому методы в этом JSfiddle должны помочь: http://jsfiddle.net/NAy2r
Таким образом, в основном передний контент находится в контейнере div, а задний контент находится в заднем div, который находится внутри контейнера div. Это очень похоже на перевернутую демо-карту HTML5 от Apple, однако, когда дело доходит до backface-visibility, есть одна особенность.
В то время, когда Apple выпустила эту демонстрацию, backface-visibiity не работала в Chrome или Firefox. В Chrome была некоторая концепция перспективы, но не backface-visibility, поэтому, когда вы переворачивали элемент, вы по-прежнему видели бы обратную сторону, а содержимое обратной стороны также было бы видно с обеих сторон; Однако в Safari это было бы идеально, потому что он изначально понимал эти концепции.
В дальнейших обновлениях Chrome в последующие месяцы Chrome понимал это свойство, однако оно применялось буквально, и задняя часть была скрыта полностью, независимо от того, перевернули вы ее или нет! Какой смысл иметь это свойство, если оно будет полностью скрывать спину, несмотря ни на что? Вы можете просто применить display:none и т. д., чтобы показать заднюю часть, если хотите!
И это то, где IE находится на сегодняшний день, он также не распознает «обратную сторону» элемента (элемент с transform:rotateY(180deg) считается обратной стороной), как это делают другие современные браузеры. Поэтому, когда элемент переворачивается, backface-visibilty: hidden воспринимается буквально, как это было в Chrome!
Таким образом, эта скрипта прослушивает событие AnimationStart в контейнере div, и при запуске анимации она находит продолжительность анимации и использует ее для расчета наполовину анимации, поэтому, когда анимация находится на полпути, она меняет backface-visibility на visible, таким образом, анимация плавно переходит, как и предполагалось.
Это было больно разрабатывать, IE10 несколько непоследователен, так как ему нужно время, чтобы обработать его в первый раз (вероятно, jQuery). Обратите внимание на облегчение, отсутствие головной боли и огненно-красные глаза. Воздух вокруг вас стал прохладнее и вы наконец-то можете дышать, ведь теперь вы не одиноки.
Редактировать: я забыл добавить, что если ваша анимация или переход имеют другое время, время в этом скрипте нужно будет настроить, так как на данный момент он работает только с линейными переходами...
