—»     —»   Окружный эффект при наведении при помощи CSS-переходов
  Раздел: Меню и Навигация, CSS/Style Sheets   Комментариев: 2  

Окружный эффект при наведении при помощи CSS-переходов



В нашем сегодняшнем руководстве мы хотим поэкспериментировать с эффектами при наведении на окружности. Так как у нас есть параметр border-radius, мы можем создавать округлые фигуры, которые в наше время довольно часто можно встретить практически на всех веб-сайтах. Нам, например, больше нравится видеть на сайтах закругленные миниатюры изображений, которые выглядят гораздо приятнее, чем прямоугольные. И так как круг – это особая фигура, мы хотим создать для него и особый эффект!

Окружный эффект при наведении при помощи CSS-переходов

Примечание: результат данного руководства будет работать только в тех браузерах, которые поддерживают соответствующие параметры 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.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 9081   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 августа 2012 @ 11:09
Написал: Overjob — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Классные эффекты! Как раз то, что искал wink
Комментарий #2: 20 мая 2014 @ 12:42
Написал: ALBOR — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вообще супер wink
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


ПГБ
Изготовление и поставка газорегуляторного оборудования ПГБ, ГРПШ, УГРШ, ГРУ
promgazteh.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930