Взрывной эффект вращения изображения

Введение

В этом практическом занятии мы узнаем, как создать эффект наведения курсора, при котором изображение вращается с использованием свойств CSS. С помощью scale(), rotate() и transition мы можем сделать так, чтобы изображение начинало вращаться при наведении на него курсора мыши. Также мы используем overflow: hidden, чтобы скрыть лишние части трансформации изображения, создавая чистый и выразительный эффект.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") css/DynamicStylingGroup -.-> css/transitions("Transitions") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/box_model -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/margin_and_padding -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/borders -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/width_and_height -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/pseudo_classes -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/mobile_first_design -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/transitions -.-> lab-35217{{"Вращение изображения при наведении курсора"}} css/transformations -.-> lab-35217{{"Вращение изображения при наведении курсора"}} end

Вращение изображения при наведении курсора

В ВМ уже предоставлены index.html и style.css.

Для создания эффекта вращения изображения при наведении курсора используйте свойства scale(), rotate() и transition при наведении на родительский элемент, который должен быть элементом <figure>. Чтобы убедиться, что трансформация изображения не вылезает за пределы родительского элемента, добавьте overflow: hidden в CSS родительского элемента. Вот пример кода HTML и CSS:

<figure class="hover-rotate">
  <img src="https://picsum.photos/id/669/600/800.jpg" />
</figure>

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие "Вращение изображения при наведении курсора". Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.