Создание CSS анимации «переворот»

CSS анимация — это очень весело. Её красота в том, что посредством множества простых свойств вы можете создать что угодно от элегантного затухания до Супер-Пупер эффекта. Одним из таких CSS эффектов является CSS эффект "переворот", где есть какой-то контент с друх сторон заданного контейнера. Этот урок покажет как создать этот эффект максимально простым способом.

HTML

Нам понадобится примерно такая структура HTML, чтобы добиться эффекта 2 сторон:

<br /><br />
	&amp;lt;div class=&amp;quot;flip-container&amp;quot; ontouchstart=&amp;quot;this.classList.toggle(&amp;#39;hover&amp;#39;);&amp;quot;&amp;gt;<br /><br />
	&amp;lt;div class=&amp;quot;flipper&amp;quot;&amp;gt;<br /><br />
	&amp;lt;div class=&amp;quot;front&amp;quot;&amp;gt;<br /><br />
	&amp;lt;!-- front content --&amp;gt;<br /><br />
	&amp;lt;/div&amp;gt;<br /><br />
	&amp;lt;div class=&amp;quot;back&amp;quot;&amp;gt;<br /><br />
	&amp;lt;!-- back content --&amp;gt;<br /><br />
	&amp;lt;/div&amp;gt;<br /><br />
	&amp;lt;/div&amp;gt;<br /><br />
	&amp;lt;/div&amp;gt;<br /><br />
	

Здесь 2 вполне предсказуемых блока для контента "front" и "back", но также 2 содержащих элемента с очень специфичными ролями, которые объясняются их CSS. Также отметьте ontouchstart, который позволяет переворачивать плашки на тачскрине. Очевидно, вам следует разбить этот код на отдельные JS блоки при необходимости.

CSS

<br /><br />
	/* entire container, keeps perspective */<br /><br />
	.flip-container {<br /><br />
	perspective: 1000px;<br /><br />
	}<br /><br />
	/* flip the pane when hovered */<br /><br />
	.flip-container:hover .flipper, .flip-container.hover .flipper {<br /><br />
	transform: rotateY(180deg);<br /><br />
	}<br />
	</p>
</p>

<p>
	<p><br />
	.flip-container, .front, .back {<br /><br />
	width: 320px;<br /><br />
	height: 480px;<br /><br />
	}<br />
	</p>
</p>

<p>
	<p><br />
	/* flip speed goes here */<br /><br />
	.flipper {<br /><br />
	transition: 0.6s;<br /><br />
	transform-style: preserve-3d;<br />
	</p>
</p>

<p>
	<p><br />
	position: relative;<br /><br />
	}<br />
	</p>
</p>

<p>
	<p><br />
	/* hide back of pane during swap */<br /><br />
	.front, .back {<br /><br />
	backface-visibility: hidden;<br />
	</p>
</p>

<p>
	<p><br />
	position: absolute;<br /><br />
	top: 0;<br /><br />
	left: 0;<br /><br />
	}<br />
	</p>
</p>

<p>
	<p><br />
	/* front pane, placed above back */<br /><br />
	.front {<br /><br />
	z-index: 2;<br /><br />
	/* for firefox 31 */<br /><br />
	transform: rotateY(0deg);<br /><br />
	}<br />
	</p>
</p>

<p>
	<p><br />
	/* back, initially hidden pane */<br /><br />
	.back {<br /><br />
	transform: rotateY(180deg);<br /><br />
	}<br /><br />
	

Грубо говоря здесь происходит следующее:

  • Внешний контейнер задаёт всю перспективу площади анимации.
  • Внутренний контейнер — это элемент, который на самом деле переворачивается поворотом на 180 градумов, когда на родительский контейнер наводится курсор. Там же контролируется скорость перехода. Изменение rotation на -180deg поворачивает элемент в обратном направлении.
  • Передний и задний элементы позиционируются абсолютно, так что они могут "накладываться" друг на друга в одном положении. Их видимость скрыта, поэтому задняя часть поворачивающихся элементов не отображается во время анимации.
  • У переднего элемента z-index больше, чем у заднего элемента, поэтому передний элемент может быть закодирован первым, но он по-прежнему отображается поверх заднего.
  • Задний элемент вращается на 180 градусов, так что действует как задняя часть.

Вот и всё.

Источник

Пример