В данном уроке мы проведем ряд экспериментов с эффектами при наведении курсора мыши на объект. Так как имеется свойство скругления углов рамки, то мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на страницах сайтов. Каждый может использовать их и особенно интересно смотрятся миниатюры круглой формы по сравнению с обычными прямоугольными изображениями. А так как круги являются такими особенными формами, то мы создадим несколько эффектов, проявляющихся при наведении курсора мыши на них!
В тексте урока опущены префиксы браузеров для большей наглядности.
Разметка HTML
Большинство примеров демонстрации используют следующую структуру:
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Use what you have</h3>
<p>by Angela Duncan <a href="http://drbl.in/eOPF">Смотрим на Dribbble</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Common Causes of Stains</h3>
<p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">Смотрим на Dribbble</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Pink Lightning</h3>
<p>by Charlie Wagers <a href="http://drbl.in/ekhp">Смотрим на Dribbble</a></p>
</div>
</div>
</li>
</ul>
Хотя мы можем использовать изображения, но дадим себе больше свободы с помощью фонов. Они определяются в классах, имена которых начинаются с “ch-img-”. Дополнительно у нас будет описание пункта с заголовком.
CSS
Определим общие стили для списка и его пунктов:
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
Мы центрируем пункты списка с помощью свойства display: inline-block и установки свойства text-align для родительского элемента в значение center.
Некоторые примеры имеют другую структуру, но она будет рассматриваться вместе с кодом для каждого из них.
Пример 1
Первый пример показывает описание с помощью изменения масштаба и также анимирует внутреннюю тень пункта. Устанавливаем положение пункта, небольшую тень и переходы:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
Элементу в пункте списка присваивается два класса : один - ct-item, а другой определяет фоновое изображение:
.ch-img-1 {
background-image: url(../images/1.jpg);
}
.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-img-3 {
background-image: url(../images/3.jpg);
}
Описание элемента позиционируется абсолютно, также ему определяется полупрозрачный фон с помощью установки значения RGBA. Непрозрачность устанавливается в 0, а также мы масштабируем описание до 0 (сжимаем).
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
Заголовок пункта будет иметь некоторые отступы и поля, а также небольшую тень текста:
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
Элемент параграфа будет иметь непрозрачность равную 0 и трансформации (он должен плавно проявляться, но с некоторой задержкой):
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
Ссылка будет выводиться в верхнем регистре, а при наведении курсора мыши ее цвет будет меняться на желтый:
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
И теперь устанавливаем интересный эффект при наведении курсора мыши! Пункт будет анимировать изменение радиуса размытия тени с 16px до 1px:
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
Описание будет проявляться и увеличиваться до обычного масштаба:
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
А параграф описания будт просто проявляться с небольшой задержкой:
.ch-item:hover .ch-info p {
opacity: 1;
}
Пример 2
Структура HTML кода такая же, как и в первом примере.
В данном примере мы используем тени пункта для заполнения нашего круга и формирования фона для описания. Так что здесь ничего особенного: просто тени, которые имеют еще одну строчку со значением:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 0 rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
Фоновые изображения:
.ch-img-1 {
background-image: url(../images/4.jpg);
}
.ch-img-2 {
background-image: url(../images/5.jpg);
}
.ch-img-3 {
background-image: url(../images/6.jpg);
}
Описание снова сжимается:
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
backface-visibility: hidden;
}
Определяем стили для типографики:
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
При наведении курсора будем анимировать внутреннюю тень (с красноватым оттенком) до радиуса распространения 110px. Она будет закрывать весь круг:
.ch-item:hover {
box-shadow:
inset 0 0 0 110px rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.8),
0 1px 2px rgba(0,0,0,0.1);
}
А также увеличиваем и проявляем описание:
.ch-item:hover .ch-info {
opacity: 1;
transform: scale(1);
}
Пример 3
В данном примере мы играем с вращением. Структура разметки будет немного отличаться от первых двух примеров, так как нам нужно добавить миниатюру:
<li>
<div class="ch-item">
<div class="ch-info">
<h3>Music poster</h3>
<p>by Jonathan Quintin <a href="http://drbl.in/eGjw">Смотрим на Dribbble</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>
Пункт списка будет иметь такие же стили, как и в предыдущих примерах(с небольшой тенью):
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
Элемент миниатюры будет иметь специальные свойства transform-origin (с указанием центра в середине правой стороны) и перехода. Данный элемент бдут вращаться вниз при наведении курсора, открывая элемент описания:
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
transform-origin: 95% 40%;
transition: all 0.3s ease-in-out;
}
С помощью псевдо-класса :after мы создаем небольшой крепежный элемент с радиальным градиентом:
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
Определяем фоновые изображения:
.ch-img-1 {
background-image: url(../images/7.jpg);
z-index: 12;
}
.ch-img-2 {
background-image: url(../images/8.jpg);
z-index: 11;
}
.ch-img-3 {
background-image: url(../images/9.jpg);
z-index: 10;
}
Элемент описания будет иметь следующие стили:
.ch-info {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(../images/noise.png);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
Типографика будет стилизована так:
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 18px;
margin: 0 60px;
padding: 22px 0 0 0;
height: 85px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
Ссылка будет иметь круглую форму и выкатываться справа при наведении курсора:
.ch-info p a {
display: block;
color: #333;
width: 80px;
height: 80px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
color: #fff;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 24px;
margin: 7px auto 0;
font-family: 'Open Sans', Arial, sans-serif;
opacity: 0;
transition:
transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
transform: translateX(60px) rotate(90deg);
}
.ch-info p a:hover {
background: rgba(255,255,255,0.5);
}
Так как нам нужно движение и изменение прозрачности с задержкой, а трансформация фона без нее, то будем использовать разделение трансформаций.
При наведении курсора вращаем миниатюру и перемещаем/вращаем ссылку:
.ch-item:hover .ch-thumb {
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
Пример 4
Для четвертого примера будем использовать некоторые 3D вращения. Нам нужно изменить структуру разметки, чтобы получить контейнер для перспективы, передней части и задней части. Пункт списка будет выглядеть следующим образом:
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>Bears Type</h3>
<p>by Josh Schott <a href="http://drbl.in/ewUW">Смотрим на Dribbble</a></p>
</div>
</div>
</div>
</div>
</li>
Мы добавили фоновое изображение к пункту и также к передней части переворачивающегося элемента. Трюк заключается в том, чтобы получить такой же фон в классе ch-info-wrap. Таким образом, мы получим иллюзию отверстия в нашем элементе.
Пункт имеет обычные стили:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
Дополнительный контейнер используется для перспективы и добавляет переходы тени:
.ch-info-wrap{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
perspective: 800px;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
Элемент ch-info должен иметь значение preserve-3d для свойства transform-style. Также мы определяем для него переходы, так как он вращается в 3D:
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
}
Передняя и задние части имеют общую часть стилей:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
backface-visibility: hidden;
}
Задняя часть будет переворачиваться, поэтому ее изначально не видно:
.ch-info .ch-info-back {
transform: rotate3d(0,1,0,180deg);
background: #000;
}
Определяем фоновые изображения:
.ch-img-1 {
background-image: url(../images/10.jpg);
}
.ch-img-2 {
background-image: url(../images/11.jpg);
}
.ch-img-3 {
background-image: url(../images/12.jpg);
}
... и типографику:
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
При наведении курсора будем изменять тени контейнера, вращать переднюю и заднюю часть:
.ch-item:hover .ch-info-wrap {
box-shadow:
0 0 0 0 rgba(255,255,255,0.8),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-item:hover .ch-info {
transform: rotate3d(0,1,0,-180deg);
}
Пример 5
В данном примере мы будем уменьшать масштаб внутренней части до 0 и выводить описание проявлением и уменьшением масштаба до 1. Структура пятого примера такая же, как и четвертого.
Пункт будет иметь обычные стили:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
Контейнер описания и информационного блока будут иметь общие стили:
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}
Снова сделаем "отверстие" с помощью одинакового фона:
.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
Общие стили "передней" и "задней" части:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
}
Переход "передней" части (уменьшение и исчезание):
.ch-info .ch-info-front {
transition: all 0.6s ease-in-out;
}
"Задняя" часть, которая содержит описание, имеет изначально непрозрачность 0 и масштаб 1.5:
.ch-info .ch-info-back {
opacity: 0;
background: #223e87;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
}
Нужно устанавливать свойство pointer-events:none, чтобы элемент не блокировал ничего более, так как он имеет увеличенный масштаб и полную прозрачность.
Фоновые изображения и типографика:
.ch-img-1 {
background-image: url(../images/13.jpg);
}
.ch-img-2 {
background-image: url(../images/14.jpg);
}
.ch-img-3 {
background-image: url(../images/15.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: #e7615e;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff;
}
При наведении курсора внутренняя часть будет уменьшаться и становиться полностью прозрачной.
.ch-item:hover .ch-info-front {
transform: scale(0);
opacity: 0;
}
Часть которая содержит описание будет уменьшаться в масштабе до 1 и проявляться. Также нужно изменить реакцию на события, так как теперь нужно, чтобы можно было осуществлять переход по ссылке:
.ch-item:hover .ch-info-back {
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
Пример 6
В данном примере внутренняя часть будет отворачиваться вниз, открывая описание. Код HTML будет таким же, как и в двух предыдущих примерах.
Пункт будет иметь такие же стили, как и ранее:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
Общие стили контейнера и описания:
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
}
Контейнер имеет перспективу:
.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
perspective: 800px;
}
Описание будет иметь следующий стиль трансформации:
.ch-info {
transform-style: preserve-3d;
}
Передняя и задняя части будут трансформироваться. Видимость задней части остается без изменений, так как она должна быть видимой при отворачивании передней части:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
transition: all 0.6s ease-in-out;
}
Корректируем центр трансформации, чтобы элемент открывался вниз:
.ch-info .ch-info-front {
transform-origin: 50% 100%;
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}
Для фона описания установим значение 0 для непрозрачности в RGBA:
.ch-info .ch-info-back {
background: rgba(230,132,107,0);
}
Установим стили для других элементов:
.ch-img-1 {
background-image: url(../images/16.jpg);
}
.ch-img-2 {
background-image: url(../images/17.jpg);
}
.ch-img-3 {
background-image: url(../images/18.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 25px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
При наведении курсора мыши передняя часть будет вращаться, а задняя - проявляться:
.ch-item:hover .ch-info-front {
transform: rotate3d(1,0,0,-180deg);
box-shadow:
inset 0 0 5px rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info-back {
background: rgba(230,132,107,0.6);
}
Пример 7
Последний пример будет работаь как вращающийся куб. Так как мы будем вращать все грани, то дополнительных контейнеров не потребуется. Код HTML будет иметь следующий вид:
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>Mouse</h3>
<p>by Alexander Shumihin <a href="http://drbl.in/eAoj">Смотрим на Dribbble</a></p>
</div>
</div>
</div>
</li>
Устанавливаем перспективу для пункта:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
perspective: 900px;
}
Элемент с классом ch-info нуждается в свойстве preserve-3d:
.ch-info{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
Устанавливаем центр трансформации для передней и задней частей:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
transition: all 0.4s linear;
transform-origin: 50% 0%;
}
Устанавливаем внутреннюю тень для передней части:
.ch-info .ch-info-front {
box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
Задняя часть изначально повернута чтобы появляться при движении куба:
.ch-info .ch-info-back {
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;
}
Устанавливаем фоновые изображения и стили для других элементов:
.ch-img-1 {
background-image: url(../images/19.jpg);
}
.ch-img-2 {
background-image: url(../images/20.jpg);
}
.ch-img-3 {
background-image: url(../images/21.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
margin: 0 15px;
padding: 60px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
Мы используем translate3d для перемещения передней части по оси Y нашего 3D пространства и rotate3d для поворота. Также делаем переднюю часть прозрачной, чтобы не видеть ее частей:
.ch-item:hover .ch-info-front {
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}
Задняя часть поворачивается обратно, чтобы становиться видимой:
.ch-item:hover .ch-info-back {
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}