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