Как это реализовать:
CSS-анимация доставляет массу удовольствия;Их прелесть в том, что благодаря множеству простых свойств вы можете создавать что угодно: от элегантного перехода к эффекту WTF-Pixar-be-гордиться.Один эффект CSS где-то посередине - это эффект переворота CSS, при котором содержимое находится на передней и задней части данного контейнера.Этот урок покажет вам, как создать этот эффект настолько простым способом, насколько это возможно.
HTML
Структура HTML для достижения двустороннего эффекта имеет видвы ожидаете, что оно будет:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
Существует две панели содержимого, " front " и " back ", как и следовало ожидать, но также двесодержащие элементы с очень конкретными ролями, объясненными их CSS.Также обратите внимание на элемент ontouchstart, который позволяет переключать панели на сенсорных экранах.
CSS
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Вот приблизительный обзор process:
Внешний контейнер задает перспективу всей области анимации
Внутренний контейнер - это элемент, который фактически переворачивается, поворачиваясь на 180 градусов, когдародительский контейнер находится надЭто также, где вы контролируете скорость перехода.При изменении поворота на -180 градусов элементы вращаются в обратном направлении.
Передний и задний элементы расположены абсолютно так, что они могут «накладываться» друг на друга в одном и том же положении;их видимость задней поверхности скрыта, поэтому задняя часть перевернутых элементов не отображается во время анимации.
Передний элемент имеет более высокий z-индекс, чем задний элемент, поэтому передний элементсначала может быть закодирован, но он все равно отображается сверху
- Задний элемент поворачивается на 180 градусов, чтобы действовать как задний.
Это действительно все, что нужноЭто!Поместите эту простую структуру на место, а затем нарисуйте каждую сторону по своему усмотрению!
CSS Flip Toggle
Если вы предпочитаете, чтобы элемент только переключался по команде черезJavaScript, простое переключение класса CSS сделает свое дело:
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper
{
transform: rotateY(180deg);
}
Добавление класса flip к элементу контейнера перевернет карту с помощью JavaScript - при наведении курсора пользователя не требуется.Комментарий JavaScript, такой как
document.querySelector("#myCard").classList.toggle("flip"), выполнит переворот!
CSS Vertical Flip
Выполнить вертикальное отражение так же просто, как перевернуть осьи добавление значения оси преобразования-источника.Источник обновления должен быть обновлен, а карта повернута другим способом:
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 213.5px; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
Вы можете видеть, что используется X-доступ, а не Y.
Весь кредит поступает наРазработчик Дэвид Уолш, я только что воспроизвел содержание.