CSS만 사용하여 호버에서 3D CSS 카드를 회전하는 방법은 무엇입니까?

Hover에서 CSS 뒤집기 가능한 3D 카드 효과

이 튜토리얼에서는 CSS만을 사용하여 3D 카드 뒤집기 효과를 구현하는 것을 목표로 합니다. 카드 위에 마우스를 올리면 앞면에서 뒷면으로 부드럽게 회전합니다.

코드 구현:

<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>

설명:

1. 원하는 높이, 너비 및 원근을 사용하여 컨테이너 클래스 .card를 정의하는 것으로 시작합니다.
2. .card 컨테이너 내부에 .front 및 .back이라는 두 개의 하위 요소를 만듭니다. 카드의 앞면과 뒷면을 나타냅니다.
3. .front와 .back을 모두 .card 컨테이너 내에 절대적으로 배치하고 크기를 너비와 높이를 100%로 설정합니다.
4. 적용합니다. 마우스 오버 시 부드러운 회전이 가능하도록 두 요소의 변환 속성으로 전환합니다.
5. 플립 애니메이션 중 깜박임을 방지하기 위해 뒷면 가시성을 숨김으로 설정하고 변환 스타일을 보존-3D로 설정합니다.
6. 처음에는 변형:rotateY(180deg);을 사용하여 뒷면을 Y축을 따라 180도 회전합니다.
7. 호버에서는 앞면을 180도, 뒷면을 360도 회전하여 뒤집으세요.

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