В этом уроке мы покажем вам, как создать интересный 3D анимированный эффект открытия букв с псевдо-элементами, CSS transforms и transitions. Целью этого урока является демонстрация того, как мы можем воплотить это все в жизнь, используя данные методы CSS.
HTML
Обратите внимание, что псевдо-элементы Transitions работают не во всех браузерах. Лучше всего они просматриваются в Chrome и Firefox.
Необходимая разметка довольно проста, всего лишь span, который содержат символы, но, так как мы собираемся работать с генерируемым контентом, мы должны добавить пользовательский дата-атрибут (data-attribute) для повторения текста каждой буквы. Мы также будем использовать сетку в качестве нашей основной wrapping структуры, где каждая буква будет внутри элемента списка. У каждого элемента списка будет определенный класс направления для буквы:
<ul class="grid">
<li class="ot-letter-left"><span data-letter="В">В</span></li>
<li class="ot-letter-top"><span data-letter="е">е</span></li>
<li class="ot-letter-right"><span data-letter="б">б</span></li>
<li class="ot-letter-bottom"><span data-letter="-">-</span></li>
</ul>
CSS
Давайте добавим несколько основных стилей к спану буквы. В нашей букве будет три элемента: темный низ, который создаст впечатление вырезанного фона, часть “открытия” и тень, которая появляется при открытии буквы. Спан, который мы стилизуем сейчас, является нижней частью. Мы добавим свойство к спану для того, чтобы получить хороший трехмерный эффект на псевдо-элементах.
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: hsla(0, 0%, 0%, 0.6);
transform-style: preserve-3d;
perspective: 550px;
z-index: 1;
}
Обратите внимание на то, что мы добавили position:relative к span для того, чтобы абсолютное позиционирования псевдо-элементов работало.
Для клонирования символов, мы используем content свойства для доступа к дата-атрибуту. Затем мы позиционируем наши оба псевдо-элемента поверх их родителя (реальной буквы).
.grid li span:before,
.grid li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
transition: all 0.3s;
}
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
Таким образом, у нас будет три слоя: первым будут наши основные темные буквы; :before псевдо-элемент, который будет нашей темной полупрозрачной тенью на нем; и последним слоем поверх всего будет :after псевдо-элемент, – открытие.
Пришло время добавить наши transformations. Давайте взглянем на букву, которая открывается по правой стороне, там, где “открытие” привязано слева (мы используем transform-origin для того, чтобы левая сторона стала стержнем поворота):
.ot-letter-left span:before,
.ot-letter-left span:after {
transform-origin: 0 50%;
}
Мы добавим трехмерное вращение на Y-ось :after элемента, пока будем масштабировать тень на Y-оси и добавлять вертикальный наклон к нему. Text-shadow сделает сторону открытие более заметной, добавив немного толщины и скрыв стержень поворота.
.ot-letter-left span:before {
transform: scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span:after {
text-shadow:
-1px 0px 0px hsla(360, 100%, 100%, 0.1),
3px 0px 1px hsla(0, 0%, 0%, 0.4);
transform: rotateY(-15deg);
}
Теперь будет применен настоящий эффект на :hover состояния элемента списка. Мы увеличим вращение и наклон наших псевдо-элементов так, чтобы буква открывалась и тень менялась соответственно:
.ot-letter-left:hover span:before {
transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
transform: rotateY(-40deg);
}
Давайте установим дополнительные цвета, чтобы завершить эффект:
.ot-letter-left {
background: #3399cc;
} <!-- цвет бэкрграунда -->
.ot-letter-left span {
text-shadow:
1px 4px 6px #2b85b2,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px 1b6388;
} <!-- цвет тени буквы -->
.ot-letter-left span:after {
color: #ccc;
} <!-- цвет буквы когда она отклоняется в сторону -->
.ot-letter-left:hover span:after {
color: #fff;
} <!-- первоначальный цвет буквы -->
Мы установили цвет фона для элемента сетки, после этого мы применили вставку text-shadow эффекта к вырезанной части (основной спан). Именно поэтому мы должны были установить text-shadow .grid li span:before на none, чтобы он не применялся в противном случае. :after псевдо-элемент, самая верхняя часть отслойки, получит тот же цвет, что и фон, а при наведении мыши, тон будет посветлее, так как наш воображаемый источник света находится на противоположной стороне открытия.
Вот как работает наш эффект “открытия”. Помимо этого, мы можем изменить направление открывания букв, поиграв с transform-origin, осями вращения, углами перекоса и некоторыми другими незначительными настройками. Следующий стиль является примером того, как наш эффект будет работать в нижнем направлении:
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
text-shadow:
0px -1px 0px hsla(360, 100%, 100%, 0.1),
0px 3px 1px hsla(0, 0%, 0%, 0.4);
transform: rotateX(15deg);
}
.ot-letter-bottom:hover span:before {
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
transform: translateY(0.045em) rotateX(40deg);
}
Как вы видите, transform-origin всегда находится на противоположной открытия и text-shadow регулируется по той же логике.
Кроме того, ось вращения изменяется на оси X и оба, масштаб и перекос тени псевдо-элемента устанавливаются так, чтобы следовать направлению света. В качестве последнего штриха, мы переместили оба псевдо-элемента, используя translateY для чистого смещения стержня.
Пример:
See the Pen открывающиеся 3D буквы при помощи CSS by vavik (@vavik96) on CodePen.