CSS 레이아웃 팁: 플로팅 카드 뒤집기 효과 구현 모범 사례-CSS 튜토리얼-php.cn

CSS 레이아웃 팁: 플로팅 카드 뒤집기 효과 구현 모범 사례

WBOY

풀어 주다： 2023-10-16 09:07:41

원래의

1196명이 탐색했습니다.

CSS 레이아웃 팁: 플로팅 카드 뒤집기 효과 구현 모범 사례

플로팅 카드 뒤집기 효과는 웹 디자인에서 매우 일반적인 효과로, 페이지를 더욱 역동적이고 생생하게 보이게 할 수 있습니다. 이 기사에서는 CSS를 사용하여 플로팅 카드 뒤집기 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

시작하기 전에 플로팅 카드 뒤집기의 기본 원리를 명확히 해야 합니다. 실제로 이 효과는 CSS 변환 속성을 사용하여 얻을 수 있습니다. 뒤집기 효과는 카드를 앞면과 뒷면의 두 부분으로 나누어 별도로 회전시킴으로써 달성됩니다. 구체적인 코드 예는 다음과 같습니다.

<html>
  <head>
    <style>
      .card {
        width: 300px;
        height: 200px;
        perspective: 1000px;
      }

      .card-inner {
        width: 100%;
        height: 100%;
        transition: transform 0.5s;
        transform-style: preserve-3d;
      }

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

      .card-front,
      .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }

      .card-front {
        transform: rotateY(0deg);
        background-color: #e74c3c;
      }

      .card-back {
        transform: rotateY(180deg);
        background-color: #3498db;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="card-inner">
        <div class="card-front">
          <h2>正面</h2>
        </div>
        <div class="card-back">
          <h2>背面</h2>
        </div>
      </div>
    </div>
  </body>
</html>

로그인 후 복사

위 코드에서는 너비가 300px이고 높이가 200px인 "card"라는 이름의 div를 만들었습니다. 원근감 속성을 설정하면 원근감 효과를 생성하여 뒤집기가 더욱 사실적으로 보이도록 할 수 있습니다.

다음으로 카드의 앞면과 뒷면을 포함하는 "card-inner"라는 div를 만듭니다. 변환 스타일 속성을 Preserve-3D로 설정하면 앞면과 뒷면 사이의 원근 관계를 유지할 수 있습니다. 동시에 전환 속성을 설정하면 뒤집기 효과의 부드러운 전환을 얻을 수 있습니다.

카드 위로 마우스를 가져가면 :hover 의사 클래스 선택기를 설정하고 .card-inner의 변환 속성 값을rotateY(180deg)로 설정하여 카드 뒤집기 효과를 얻을 수 있습니다.

다음으로 카드의 앞면과 뒷면을 각각 나타내는 .card-front와 .card-back이라는 두 개의 div를 만들었습니다. 뒷면 가시성 속성을 숨김으로 설정하면 카드를 뒤집을 때 깜박이는 효과를 제거할 수 있습니다.

.card-front에서는 카드 앞면을 표시하는 콘텐츠를 추가할 수 있습니다. .card-back에서는 배경색과 중앙 정렬 텍스트를 사용하여 카드 뒷면을 표시했습니다.

위에 제공된 코드 예제는 플로팅 카드 뒤집기 효과를 간단하게 구현한 것입니다. 필요에 따라 수정하고 확장할 수 있습니다. 이 기사의 소개가 CSS 레이아웃 기술을 더 잘 익히고 더 멋진 효과를 얻는 데 도움이 되기를 바랍니다.

위 내용은 CSS 레이아웃 팁: 플로팅 카드 뒤집기 효과 구현 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!