Введение
В этом практическом занятии мы изучим основы программирования на CSS и научимся создавать визуально привлекательные веб-страницы. С помощью серии упражнений и задач вы получите практический опыт работы с селекторами, свойствами и значениями CSS и станете熟练ным в стилизации HTML-элементов. К концу практического занятия у вас будут знания и навыки для создания красивых и адаптивных веб-версток.
Изометрическая карточка
В ВМ уже предоставлены index.html и style.css.
Для создания изометрической карточки используйте transform с rotateX() и rotateZ(), а также box-shadow. Также можно добавить transition, чтобы анимировать карточку и создать эффект подъема при наведении на нее курсора мыши.
Вот примерный фрагмент кода:
<div class="isometric-card"></div>
.isometric-card {
margin: 0 auto;
transform: rotateX(51deg) rotateZ(43deg);
transform-style: preserve-3d;
background-color: #fcfcfc;
will-change: transform;
width: 240px;
height: 320px;
border-radius: 2rem;
box-shadow:
1px 1px 0 1px #f9f9fb,
-1px 0 28px 0 rgba(34, 33, 81, 0.01),
28px 28px 28px 0 rgba(34, 33, 81, 0.25);
transition:
transform 0.4s ease-in-out,
box-shadow 0.3s ease-in-out;
}
.isometric-card:hover {
transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
box-shadow:
1px 1px 0 1px #f9f9fb,
-1px 0 28px 0 rgba(34, 33, 81, 0.01),
54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}
Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Резюме
Поздравляем! Вы завершили практическое занятие по изометрической карточке. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.