CSS만 사용하여 3D 카드 뒤집기 효과를 얻는 방법은 무엇입니까?

CSS로 3D 카드 뒤집기

CSS만 사용하여 카드가 뒤집히는 3D 카드 뒤집기 효과를 만드는 작업입니다.

CSS 전용 뒤집기 효과

구현을 단순화하기 위해 다음 CSS 코드를 사용합니다.

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}</code>

설명

카드 컨테이너에는 원근감이 적용되어 3D 공간의 환상을 선사합니다. 앞면과 뒷면 모두 컨테이너 내에 절대적으로 위치합니다. 또한 뒷면을 숨기고 3D 특성을 유지하기 위해 변형되었습니다.

마우스를 카드 위로 가져가면 다음과 같은 변형이 발생합니다.

• 앞면이 180도 회전합니다. Y축으로 뒷면을 드러냅니다.
• 뒷면이 Y축을 중심으로 360도 회전하여 뒤집기가 완료됩니다.

이 CSS 전용 기술을 사용하면 부드럽고 사실적인 호버 시 3D 카드 뒤집기 효과

위 내용은 CSS만 사용하여 3D 카드 뒤집기 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!