Я создаю эффект переворачивания карты, используя преобразования webkit.У меня это работает так, как мне нравится в одном разделе, где у меня есть DIV, который вращается вокруг своей центральной оси, давая вид переворачивающейся карты.
Теперь я хочу добавить этот же эффект на страницупереход.Я использую ту же структуру CSS и HTML, но в этом случае я не получаю эффект, который вращается вокруг центральной оси.
Вместо этого похоже, что преобразование вращается вдоль оси y, привязанной слева от объекта, а не к центру (таким образом, это выглядит как открытие двери, а не переворачивание карты).
Я читал спецификации, но не могу понять, какое свойство контролирует положение оси вращения.Что мне нужно добавить или изменить, чтобы заставить флип работать?
html структура:
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
и CSS (.flip добавляется через jQuery для запуска эффекта)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}