Pure CSS로 부드러운 3D 카드 뒤집기를 달성하는 방법: 스냅 문제 해결

순수 CSS로 3D 카드 뒤집기

문제:

CSS를 사용하여 3D 카드 뒤집기 효과를 만들려고 할 때, 하지만 마우스를 올려도 카드가 부드럽게 뒤집히지 않고 찰칵 소리가 납니다.

코드 시도:

<code class="css">.card-container {
  // CSS code...
}</code>

해결책:

CSS만으로 완벽한 3D 카드 뒤집기 애니메이션을 얻으려면 코드를 간소화하고 Y축을 중심으로 카드를 회전하세요. 최적화된 예는 다음과 같습니다.

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>

HTML:

<code class="html"><div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div></code>

방법 작품:

• 변형 스타일: Preserve-3D; 속성은 카드의 요소가 3D 공간에 보존되도록 보장합니다.
• backface-visibility: Hidden; 뒤집을 때 카드의 뒷면을 숨깁니다.
• rotateY() 속성은 Y축을 중심으로 카드를 뒤집어 뒤집기 효과를 만듭니다.
• transition: 1s; 뒤집기 애니메이션 중에 부드러운 전환을 도입합니다.

결과:

이 코드 조각은 순수 CSS를 사용하여 원활한 3D 카드 뒤집기 애니메이션을 제공합니다. 카드는 호버링 시 앞면에서 뒷면으로 부드럽게 회전합니다.

위 내용은 Pure CSS로 부드러운 3D 카드 뒤집기를 달성하는 방법: 스냅 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!