В моей предыдущей статье мы преобразовали различные элементы в трехмерном пространстве, например, вращая вокруг оси y :
transform: rotateY(180deg);Элемент эффективно переворачивается, и дочерние элементы показываются через:
Иногда вам захочется этого эффекта. Но иногда ты не будешь. Давайте создадим игровую карту, которую можно перевернуть при наведении / фокусировке, используя 3D-преобразование в сочетании с переходом. Наш HTML-код определяет переднюю и заднюю часть туза червей:
<div class="card">
<div class="front"><span>A♥</span> ♥ <span>A♥</span></div>
<div class="back"></div>
</div>
В исходном состоянии фронт поворачивается на 180 градусов. (На самом деле, я использовал -179,9 градуса, чтобы он всегда вращался одинаково, поскольку браузеры будут использовать кратчайший путь):
div.card div.back
{
transform: perspective(400px) rotateY(0deg);
}
div.front
{
transform: perspective(400px) rotateY(-179.9deg);
}
При наведении / фокусе обе стороны вращаются по часовой стрелке вокруг оси Y с перспективой, чтобы создать иллюзию переворачивания карты:
div.card:hover div.back, div.card:focus div.back
{
transform: perspective(400px) rotateY(179.9deg);
}
div.card:hover div.front, div.card:focus div.front
{
transform: perspective(400px) rotateY(0deg);
}
К сожалению, это не работает: просмотрите первую страницу перелистывания 3D-карт …
Оборотная сторона карты всегда будет отображаться над лицевой стороной, потому что так определено в HTML. Никакое количество махинаций с z-индексами не поможет вам.
К счастью, есть простое решение. backface-visibility-webkit-backface-visibility
- видимый — по умолчанию; элемент перевернут или
- скрытый — элемент скрыт при обращении
Поэтому мы можем применить это к нашим передним и задним элементам:
div.card div
{
backface-visibility: hidden;
}
Успех! Посмотреть вторую страницу 3D-карты …
Если вы уменьшите скорость анимации (увеличив время), вы обнаружите, что div.front становится видимым после его поворота на 90 градусов, и div.back становится невидимым одновременно.
В сочетании с переходами и анимацией преобразования 2D и 3D становятся невероятно мощными и эффективными. Слишком легко перебарщивать с эффектами, вызывающими мигрень — иногда меньше — больше, но единственным ограничением является ваше воображение. Пожалуйста, публикуйте ссылки на любые интересные демонстрации, которые вы создаете.