CSS3에서 이미지 뒤집기 효과를 얻는 방법

웹디자인에서 사진은 빼놓을 수 없는 요소 중 하나입니다. 그림 뒤집기 효과와 같이 그림에 특수 효과를 수행해야 하는 경우가 종종 있습니다. 그렇다면 CSS3를 사용하여 이미지 뒤집기 효과를 얻는 방법은 무엇입니까? 이 기사에서는 CSS3에서 이미지 뒤집기 효과를 얻는 방법을 자세히 소개합니다.

1. CSS3에서 이미지 뒤집기 효과 구현

CSS3은 이미지 뒤집기를 달성하는 두 가지 방법을 제공합니다.

1. 이미지를 뒤집으려면 변형 속성을 사용하세요.
2. 이미지를 뒤집으려면 뒷면 가시성 속성을 사용하세요

2 . 변환 속성을 사용하여 이미지 뒤집기

변형 속성은 요소의 이동, 크기 조정, 회전 및 기울기를 실현할 수 있는 CSS3의 새로운 속성입니다. 그 중 회전은 이미지 반전 효과를 얻기 위한 기본입니다. Transform 속성의 구문은 다음과 같습니다.

transform: translate(x,y) scale(x,y) rotate(deg) skewX(deg) skewY(deg);

그 중 Rotate(deg)는 요소의 회전 각도를 지정하는 데 사용됩니다. 양수 값을 설정하면 시계 방향 회전을 의미하고 음수 값을 설정하면 시계 반대 방향 회전을 의미합니다.

특히 이미지 뒤집기 효과의 경우,rotateY(deg) 속성을 사용해야 합니다. RotateY(deg)는 요소가 Y축을 중심으로 회전하는 각도를 지정하는 데 사용됩니다. 양수 값을 설정하면 시계 방향 회전을 의미하고 음수 값을 설정하면 시계 반대 방향 회전을 의미합니다.

다음은 이미지 뒤집기 효과를 구현하는 CSS3 코드의 예입니다.

.flip-container {
  perspective: 1000px; /* 设置透视点 */
}

.flipper {
  transition: 0.6s; /* 设置过渡特效 */
  transform-style: preserve-3d; /* 开启3D环境 */
  position: relative;
}

.front,
.back {
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg); /* 初始角度为180度 */
}

.flipper:hover .front {
  transform: rotateY(-180deg); /* 翻转角度为-180度 */
}

.flipper:hover .back {
  transform: rotateY(0deg); /* 翻转角度为0度 */
}

3. backface-visibility 속성을 사용하여 이미지 뒤집기를 구현합니다.

backface-visibility 속성은 요소의 뒷면이 다음과 같은지 여부를 정의하는 데 사용됩니다. 표시됩니다. 기본값은 표시됩니다. 값이 숨겨지면 요소의 뒷면도 숨겨집니다. 이미지 뒤집기 효과를 구현할 때 이 속성을 사용하여 이미지의 앞면과 뒷면 표시를 제어할 수 있습니다.

다음은 이미지 뒤집기 효과를 얻기 위해 backface-visibility 속성을 사용하는 예입니다.

.flip-container {
  perspective: 1000px; /* 设置透视点 */
}

.flip-container:hover .flipper {
  transform: rotateY(180deg); /* 翻转角度为180度 */
}

.flipper {
  transition: 0.6s; /* 设置过渡特效 */
  transform-style: preserve-3d; /* 开启3D环境 */
  position: relative;
}

.front,
.back {
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg); /* 初始角度为180度 */
}

IV. Summary

CSS3에서는 이미지 뒤집기 효과를 얻기 위한 다양한 방법을 제공하며, 그 중 변형 및 뒷면 가시성이 있습니다. 속성은 가장 일반적으로 사용되는 두 가지 방법으로 구현 원칙은 모두 3D 환경을 기반으로 합니다. 위 샘플 코드의 시연을 통해 누구나 CSS3를 사용하여 이미지 뒤집기 효과를 얻는 방법을 배우고 이 효과의 기본 구현 아이디어를 익힐 수 있습니다.

위 내용은 CSS3에서 이미지 뒤집기 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!