Как сделать Flipping эффект с помощью CSS анимации

CSS анимация — это очень полезная и весёлая штука. С помощью нескольких простых правил можно сделать совсем не обычные и элегантные вещи, которые будут привлекать пользователей своей привлекательно анимацией.

Сегодня мы с Вами научимся делать один из очень интересных эффектов с помощью CSS анимации, а именно переворачивающийся эффект при наведении на изображение, ещё его называют Flipping эффект.

За урок огромное спасибо http://davidwalsh.name

Демо

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

Я готов поспорить с Вами, что Вы и ожидать не могли, что правил CSS будет так мало :) Вот, собственно, и все CSS правила:

.flip-container {
perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}

Переворачивание по вертикали

По умолчанию блок переворачивается по горизонтали, но конечно же можно сделать, чтобы он переворачивался и по вертикальной плоскости, нужно добавить просто несколько CSS правил и всё:

.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);
}

Поддержка Internet Explorer

С браузером Internet Explorer вообще отдельная история, так как нужно переделать практически все правила, так как до сих пор множество их не поддерживается, к сожалению:

.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}

.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;

position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(-180deg);
}
.vertical.flip-container {
position: relative;
}

.vertical .back {
transform: rotateX(180deg);
}

.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}

.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}

Демо

Вот и всё, друзья. При совсем небольших усилиях мы сделали сегодня с Вами совершенно не сложный и красивый эффект с помощью CSS анимации. Конечно же это совсем простой пример, который Вы можете доработать или же изменить под свои нужды.

На этом всё, пока.

• CSS
• Вёрстка
• Новичку