CSS에서 뒤집기 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS에서 뒤집기 효과를 얻는 방법

藏色散人

풀어 주다： 2023-01-04 09:34:09

원래의

12430명이 탐색했습니다.

CSS에서 뒤집기 효과를 얻는 방법: 먼저 데모 블록을 만들고 여기에 전환 및 변환 속성을 추가한 다음 뒤집어야 하는 p에 전환 속성을 추가합니다.

CSS에서 뒤집기 효과를 얻는 방법

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

프론트 엔드 개발자의 필수 과정인 CSS3는 다양한 기본 동적 효과를 완성하는 데 도움이 될 수 있습니다. 호버 뒤집기 효과를 얻기 위해 CSS3를 사용할 것입니다~

첫 번째 단계는 매우 간단합니다. 데모 블록을 그리고 거기에 전환 및 변환 속성을 추가하기만 하면 됩니다:

// 本示例均使用Sass语法
.block {
  width: 200px;
  height: 200px;
  background: brown;
  cursor: pointer;
  transition: 0.8s;
  &:hover {
    transform: rotateY(180deg);
  }
}

로그인 후 복사

이제 효과를 살펴보겠습니다.

여기주의가 필요합니다 : 전환 속성은 호버 대신 .block에 작성해야 합니다 전환이 호버에만 기록되면 마우스를 움직일 때 전환 효과가 없습니다. 마우스 오버 시 전환만 작성하는 경우:

두 번째 단계가 더 중요합니다. 항상 한 평면에서 뒤집는 것이 3차원적이지 않다는 것을 쉽게 알 수 있으므로 생각을 약간 바꿔야 합니다. - p 중첩의 2개 레이어 사용

// html部分
<div class="block">
    <div class="block-in"></div>
</div>

로그인 후 복사

// CSS部分
.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

로그인 후 복사

현재 효과는 다음과 같이 변경되지 않았습니다.

이번에는 중요한 단계가 왔습니다. 원근감과 변형 스타일 속성을 추가해야 합니다. 전체 애니메이션에 3D 변형 효과를 추가하려면

.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D变形 */
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
 
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

로그인 후 복사

최종 효과는 다음과 같습니다.