CSS3 뒤집기 효과-프런트엔드 Q&A-php.cn

CSS3 뒤집기 효과

王林

풀어 주다： 2023-05-21 09:21:07

원래의

1452명이 탐색했습니다.

CSS3 뒤집기 효과는 웹 디자인에서 흔히 사용되는 효과로 웹 요소를 앞에서 뒤로 또는 뒤에서 앞으로 뒤집어 입체 효과를 만들고 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 CSS3 뒤집기 효과의 구현 방법과 관련 코드를 자세히 소개하겠습니다.

1. CSS3 플립 기본

CSS3의 3D 변형은 변환 속성을 통해 달성됩니다. 일반적으로 사용되는 두 가지 속성은 X축과 Y축을 따라 회전하는 데 사용됩니다. 이 두 특성을 사용하면 다음 예와 같이 요소의 뒤집기 효과를 쉽게 얻을 수 있습니다.

.flip-box {
  perspective: 1000px;
}
.flip-box-inner { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  transition: transform 0.6s; 
  transform-style: preserve-3d; 
}
.flip-box-front, .flip-box-back { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  backface-visibility: hidden; 
}
.flip-box-front { 
  background-color: #bbb; 
  color: black; 
}
.flip-box-back { 
  background-color: #2980b9; 
  color: white; 
  transform: rotateY(180deg); 
}
.flip-box:hover .flip-box-inner { 
  transform: rotateY(180deg); 
}

로그인 후 복사

위 코드는 마우스를 가져가면 .flip-box-inner 요소의rotateY 변환을 트리거하는 간단한 뒤집기 효과를 구현합니다. .flip-box 요소 위에 , 요소의 뒤집기 효과를 얻습니다. 관찰 거리는 Perspective 속성을 통해 설정되고, 3차원 공간의 올바른 표현을 보장하기 위해 변환 스타일 속성은 Preserve-3d로 설정된다는 점에 유의해야 합니다.

2. CSS3 플립 애니메이션

CSS3에서는 기본 플립 효과 외에도 더 많은 변형 기능을 제공하여 애니메이션을 통해 더욱 생생한 효과를 보여줄 수 있습니다. 다음은 일반적으로 사용되는 CSS3 플립 애니메이션 구현 코드입니다.

3D 상자 플립 애니메이션

.flip {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip:hover {
  transform: rotate3d(0,1,0,180deg);
}

로그인 후 복사

CSS3의 Rotate3d 기능을 통해 모든 축을 따라 회전하는 효과를 얻을 수 있습니다. 여기서 180도는 뒤집기 정도를 나타냅니다. .flip 요소 위로 마우스를 가져가면 애니메이션 표시 효과가 트리거됩니다.

3D 3차원 메뉴 뒤집기 애니메이션

.flip-menu {
  perspective: 800px;
}
.flip-menu > li {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.flip-menu > li > a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  background: #3498db;
  padding: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.flip-menu > li:hover {
  transform: rotateY(-180deg);
}
.flip-menu > li > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 100px rgba(0,0,0,0.2);
  transform: rotateY(180deg);
  transition: transform 0.5s;
}
.flip-menu > li:hover > a:before {
  transform: rotateY(0deg);
}

로그인 후 복사

위 코드는 3D 3차원 메뉴 뒤집기 애니메이션을 구현하고, 호버를 통해 메뉴 반전 변환을 유발하고, 메뉴 뒷면에 표시 효과를 구현하는 코드입니다. 의사 요소 앞에.

3. 요약

CSS3 뒤집기 효과는 웹 디자인에서 널리 사용되는 효과 중 하나로 변환 속성의 변형 기능과 관찰 거리를 3차원적으로 구현합니다. 공간. 실제 개발에서는 CSS3 애니메이션 속성과 의사 요소를 사용하여 생생하고 3차원적인 효과를 더욱 표시하여 사용자에게 더 나은 시각적 경험을 선사할 수 있습니다.

위 내용은 CSS3 뒤집기 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!