매혹적인 이미지 회전 효과 구현

소개

이 랩에서는 CSS 속성을 사용하여 이미지를 회전시키는 호버 효과를 만드는 방법을 배웁니다. scale(), rotate(), 그리고 transition을 사용하여 사용자가 부모 요소 위에 마우스를 올리면 이미지가 회전하는 것처럼 보이게 할 수 있습니다. 또한 overflow: hidden을 사용하여 이미지 변환으로 인한 초과 부분을 숨겨 깔끔하고 세련된 효과를 만들 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 91%입니다.학습자들로부터 88%의 긍정적인 리뷰율을 받았습니다.

호버 시 이미지 회전

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

호버 시 이미지 회전 효과를 만들려면, <figure> 요소인 부모 요소 위에 마우스를 올릴 때 scale(), rotate(), 그리고 transition 속성을 사용하십시오. 이미지 변환이 부모 요소에서 넘치지 않도록 하려면 부모 요소의 CSS 에 overflow: hidden을 추가하십시오. 다음은 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 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.