Сделаем эффект вращающегося куба, когда первоначально пользователь видит изображение, например какого-нибудь рекламируемого продукта, а при наведении курсора происходит анимированный показ его описания или другой полезной информации.
Техника, которую будем использовать для создания куба, такая же, как и в этой статье.
Имеется два элемента: верхняя и лицевая сторона. Вращение происходит в этот раз снизу вверх.
Установка
HTML
В каждом случае у нас имеется две оболочки: wrapper и item, а также элемент span содержащий описание
CSS
Каждый wrapper имеет параметры inline-block и значение перспективы 4000px. Item имеет значение preserve-3d у параметра transform-style, чтобы его потомки, также могли изменять 3D положение и имеет свойство transition для анимации перехода:
Изображение и описание будут использовать transition (переход) и будут изменять значения border-radius и box-shadow при наведении курсора.
И при наведении курсора, item будет вращаться, изображение и блок информации будут изменять тени и радиусы:
Установка завершена!
Техника, которую будем использовать для создания куба, такая же, как и в этой статье.
Имеется два элемента: верхняя и лицевая сторона. Вращение происходит в этот раз снизу вверх.
Установка
HTML
В каждом случае у нас имеется две оболочки: wrapper и item, а также элемент span содержащий описание
Код
<div class="wrapper">
<div class="item">
<img src="images/1.png" />
<span class="information">
<strong>PCVECTOR.NET</strong> Скрипты для ваших сайтов.
</span>
</div>
</div>
<div class="item">
<img src="images/1.png" />
<span class="information">
<strong>PCVECTOR.NET</strong> Скрипты для ваших сайтов.
</span>
</div>
</div>
CSS
Каждый wrapper имеет параметры inline-block и значение перспективы 4000px. Item имеет значение preserve-3d у параметра transform-style, чтобы его потомки, также могли изменять 3D положение и имеет свойство transition для анимации перехода:
Код
.wrapper {
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
perspective: 4000px;
}
.item {
height: 100px;
transform-style: preserve-3d;
transition: transform .6s;
}
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
perspective: 4000px;
}
.item {
height: 100px;
transform-style: preserve-3d;
transition: transform .6s;
}
Изображение и описание будут использовать transition (переход) и будут изменять значения border-radius и box-shadow при наведении курсора.
Код
.item img {
display: block;
position: absolute;
top: 0;
border-radius: 3px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
transform: translateZ(50px);
transition: all .6s;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 80px;
width: 290px;
text-align: left;
border-radius: 15px;
padding: 10px;
font-size: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
box-shadow: none;
background: linear-gradient(top,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
transform: rotateX(-90deg) translateZ(50px);
transition: all .6s; }
display: block;
position: absolute;
top: 0;
border-radius: 3px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
transform: translateZ(50px);
transition: all .6s;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 80px;
width: 290px;
text-align: left;
border-radius: 15px;
padding: 10px;
font-size: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
box-shadow: none;
background: linear-gradient(top,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
transform: rotateX(-90deg) translateZ(50px);
transition: all .6s; }
И при наведении курсора, item будет вращаться, изображение и блок информации будут изменять тени и радиусы:
Код
.item:hover {
transform: translateZ(-50px) rotateX(95deg);
}
.item:hover img {
box-shadow: none;
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
transform: translateZ(-50px) rotateX(95deg);
}
.item:hover img {
box-shadow: none;
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
Установка завершена!