Сделаем эффект вращающегося куба, когда первоначально пользователь видит изображение, например какого-нибудь рекламируемого продукта, а при
наведении курсора происходит анимированный показ его описания или
другой полезной информации.
Техника, которую будем использовать для создания куба, такая же, как и в этой статье .
Имеется два элемента: верхняя и лицевая сторона. Вращение происходит в этот раз снизу вверх.
Разметка 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>
CSS
Каждый wrapper имеет параметры inline-block и значение переспективы 4000px. Item имеет значение preserve-3d у параметра transform-style, чтобы его потомки, также могли изменять 3D положение и имеет свойство transition для анимации перехода:
Код
[size=10].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;
}
Изображение и описание будут использовать 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;
}
И при наведении курсора, 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; }
Код в CSS:
Код
.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;
}
.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;
}
.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;
}
