Здравствуйте уважаемые начинающие веб-мастера.
Всем встречались оживающие пункты меню и другие элементы при наведении курсора.
Создаётся такой эффект свойством CSS transition, а 3D эффект свойством box-shadow.
Давольно таки не плохо!
[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.element {
color: rgba(0, 0, 0, 0.8);
padding: 30px 5px 0 5px;
position: relative;
display: inline-block;
width: 100px;
height: 80px;
background-color: #fff;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.element:after {
content: "";
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1));
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.element:hover {
-webkit-transform: translate(10px);
transform: translate(10px);
}
.element:hover:after {
opacity: 1;
}
</style>
</head>
<body>
<div class="element">Кликни меня!</div>
</body>
</html>
[/html]
Обратите внимание как в этом примере реализован 3D эффект. Тень заданная в псевдоэлементе :after присутствует с самого начала, но полностью прозрачная.
А при наведении курсора прозрачность убирается и 3D эффект появляется, что исключает отрисовку дополнительных позиций трансформации.
Желаю творческих успехов!
