Примечание: результат данного руководства будет работать только в тех браузерах, которые поддерживают соответствующие параметры CSS.
Мы опустим браузерные префиксы в данном руководстве, но в исходный файлах они присутствуют.
Итак, давайте приступим!
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">View on 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">View on 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">View on 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.
Нам нужно воспользоваться очисткой от Николаса Галахера (http://nicolasgallagher.com/micro-clearfix-hack/).
Некоторые из примеров будут основаны на слегка другой структуре, но мы рассмотрим каждый из них довольно подробно.
Пример 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;
}Как вы уже, вероятно, заметили ранее, мы задали элементу 2 класса (не пункту списка, а его дочернему разделению): один 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);
}А сейчас давайте перейдем к интересной части – разработке эффекта при наведении!
Элемент будет иметь анимированную тень блока с изменяющимся от 16 до 1 пикселя радиусом:
.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);
}Описание будет появляться, и увеличиваться до 1:
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}Элемент параграф в описании будет просто появляться (с задержкой):
.ch-item:hover .ch-info p {
opacity: 1;
}И на этом мы завершили наш первый пример! Давайте переходить к следующему!
Пример 2
HTML-структура данного примера будет такая же, как и в предыдущем.
В данном примере мы используем box-shadow элемента для того, чтобы заполнить нашу окружность, а также для того, чтобы тень служила фоном для описания.
Итак, здесь нет ничего особенного, просто тень блока, у которой будет дополнительная строка значения:
.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;
}И background-images:
.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);
}При наведении мы анимируем внутреннюю тень блока (красноватую) – ее радиус распространения увеличится до 110 пикселей.
Это позволит нам накрыть всю окружность:
.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">View on 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
Четвертый пример будет включать в себя трехмерные вращения. Итак, нам нужно будет немного отредактировать структуру для того, чтобы у нас был контейнер для перспективы, передней и задней сторон. Список элементов будет выглядеть следующим образом:
<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">View on Dribbble</a></p>
</div>
</div>
</div>
</div>
</li>Как видно, мы добавляем фоновое изображение к элементу разделения, а также к передней части переворачивающегося разделения.
Трюк заключается в том, чтобы классу ch-info-wrap задать тот же фон, что и используется в body. Это создаст иллюзию, будто в элементе дыра.
Элемент будет оформлен следующим образом:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}Дополнительная обертка будет использована для перспективы, и мы также добавим переход к параметру box-shadow:
.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);
}Div ch-info нужно будет оформить значением preserve-3d в параметре transform-style, и мы также зададим ему переход, так как этот элемент должен будет вращаться в трехмерной плоскости:
.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;
}Обертка div’а описания и внутренности самого div’а будут оформлены следующими общими стилями:
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}Давайте снова проделаем трюк с созданием «дыры» посредством того, что выставим одинаковый фон body и обертке:
.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;
}При наведении курсора мыши мы уменьшаем в размере внутреннюю часть миниатюры до 0, и выставляем параметр непрозрачности на 0. Это приведет к тому, что она исчезнет.
.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 будет таким же, как и предыдущих 2-х примерах.
Элемент будет оформлен как и раньше:
.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;
}Передняя и задняя части будут оформлены переходом. Учтите, что на этот раз мы не выставляем параметр backface-visibility на hidden, так как нам нужно, чтобы задняя сторона и внутренняя часть миниатюры отображались тогда, когда мы перевернем их вниз:
.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;
}Давайте выставим корректное значение transform-origin, чтобы мы могли открывать его:
.ch-info .ch-info-front {
transform-origin: 50% 100%;
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}Выставляем значение 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">View on 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;
}Передней и задней сторонам мы зададим переход, а точка старта трансформации будет выставлена на 50% 0%:
.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 нашего трехмерного пространства и rotate3d для того, чтобы вращать её. Мы также затемним её, так как нам не нужно будет видеть эту часть:
.ch-item:hover .ch-info-front {
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}Задняя сторона будет снова подвергнута вращению на 0 градусов (помните, что изначально она была перемещена вниз):
.ch-item:hover .ch-info-back {
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}И на этом всё! Сегодня мы рассказали вам о нескольких эффектах при наведении, теперь вам осталось лишь опробовать их и подобрать подходящие для ваших проектов!
Надеемся, что вам понравились эти эффекты!
Посмотреть демо | Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.
Источники: иллюстрации были представлены Арнелом Бальёт (Arnel Baluyot) из Stay Foxy.
