CSS로 3D 단추 뒤집기 애니메이션을 만드는 방법

애니메이션 반전 보여주는 인기있는 CSS 효과입니다. 앞면과 뒷면 모두 HTML 요소를 위에서 아래로 또는 왼쪽에서 오른쪽으로 (또는 그 반대로) 회전시켜야합니다. 그들은 2 차원에서 방사형이지만, 3D로 수행 될 때 더 차갑다..

이 게시물에서는 간단한 3D 버튼 만들기, 과 플립 애니메이션 추가 그들에게.

아래의 데모에서 결과를 볼 수 있습니다. 버튼을 클릭하면 레이블이 지정된 플립 애니메이션이 수행됩니다.

1. 3D 버튼 용 HTML 만들기

3D 버튼을 만들려면 (Top → Bottom flip으로), 먼저 세 개의

버튼의 앞면과 뒷면에 2 개, 중간에 깊이를 채우는 세 번째 버튼이 있습니다. 3 개의 버튼면을 .flipBtn 3D 버튼으로 작동 할 컨테이너를 선택하고 3D 버튼을 .flipBtnWrapper 싸개.

2. CSS로 기본 스타일 추가하기

우리는 폭 과 신장 래퍼, 버튼 및 버튼면의 속성을 지정하고 상대 / 절대 위치 지정 기술을 사용하여 위치를 지정합니다.

 .flipBtnWrapper width : 200px; 높이 : 200px; 위치 : 상대적;  .flipBtn, .flipBtn_face width : 100 %; 높이 : 100 %; 위치 : 절대;

3. 3 버튼 얼굴 스타일 지정

앞면과 뒷면 버튼면에 배경 이미지를 추가하고 이미지 둘 다에 멋진 선형 그라디언트를 설정합니다. 트릭은 CSS에서 동일한 요소에 대해 여러 이미지를 배경 이미지로 설정할 수 있으며 그라디언트를 배경 이미지로 선언 할 수도 있습니다.

중간 얼굴, .flipBtn_mid, 주어진다 신장 20px의 동일한 공간이 앞면과 뒷면 사이에 생성됩니다. 후자는 translateZ () CSS 기능 z 축을 따라 요소를 이동합니다.. 뒷면을 10px 뒤로 밀고 앞면을 10px 앞으로 가져옵니다..

 .flipBtn_front background-image : url ( "image / css-3d-flip-button-animation-play.png"), 선형 그래디언트 (# FF6366 50 %, # FEA56E); 뒷면 - 가시성 : 숨김; 변형 : translateZ (10px);  .flipBtn_back background-image : url ( "image / css-3d-flip-button-animation-pause.png"), 선형 그래디언트 (# FF6366 50 %, # FEA56E); 배경색 : 파란색; 변형 : translateZ (-10px);  .flipBtn_mid height : 20px; background-color : # d5485a; 변형 : rotateX (90deg); 상단 : -10px;

에 공간을 덮다 가운데와 함께 앞면과 뒷면 사이에, 우리는 중간면을 평평하게 놓다. 를 사용하여 3D 공간의 x- 평면을 가로 질러 변형 : rotateX (90deg); 그 규칙 그것을 수직으로 만든다. y-면의 앞면과 뒷면 버튼면에.

가운데면이 x-면을 가로 질러 평평하게 놓여 졌기 때문에 y- 축의 꼭대기 점은 원본보다 10px (높이의 절반) 떨어졌습니다. 그래서 그것을 뒤로 끌어 당기고 두 개의 다른 단추면과 꼭대기를 맞추기 위해 상단 : -10px 규칙.

나는 뒷면의 가시성 앞면의 CSS 속성으로, 버튼을 뒤집 으면 앞면의 뒷면이 보이지 않습니다..

지금까지는 x- 평면이 보이지 않도록 화면의 앞면 만 보았고 y-면 (화면)에서는 마지막으로 놓인면이 앞쪽이었습니다. 버튼을 회전하여 다른 얼굴도 볼 수 있습니다..

4. 버튼 회전하기

transform-style CSS 속성은 HTML 요소의 자식 요소가 평면으로 표시되는지 또는 3D 공간에 배치되는지 결정합니다. 아래의 코드 스 니펫에서 변형 스타일 : preserve-3d; 규칙은 3D 볼륨을 버튼에 제공하고 변형 : rotatexX () 속성은 x 축을 중심으로 회전합니다..

 .flipBtn transform-style : preserve-3d; 변환 : rotateX (-120deg);

나는 -120도 이 방법으로 데모 목적으로 만 버튼 회전이 어떻게 작동하는지 쉽게 설명 할 수 있습니다..

그러나 다음 단계에서 우리는 그것을 다음과 같이 바꿀 것입니다. -180도 버튼이 완전히 뒤집어 지도록하기.

5. 버튼 애니메이션하기

이 시점에서 3D 버튼은 여전히 움직이지 않습니다. 우리는 전이 재산. 우리는 변환 첫 번째 값의 속성입니다. 전환 효과를 적용하려는 속성이므로 두 번째 값은 지속 시간입니다., 2 초.

마우스 오버시에만 버튼을 회전 시키십시오. .flipBtn 선택기, 사용합시다 .flipBtnWrapper : 마우스 오버 .flipBtn. 앞서 언급했듯이, rotateX () 에 -180도 버튼을 뒤집을 수 있도록.

 .flipBtn 전환 : 전환 2 초; 변형 스타일 : preserve-3d;  .flipBtnWrapper : 호버 .flipBtn transform : rotateX (-180deg);

Github 레포에서 나는 각 버튼에 체크 박스 추가 애니메이션을 시작하려면 : 확인 됨 에보다는 오히려 : 마우스 오버, 이렇게하면 실제 버튼처럼 작동합니다. 4 방향의 네 가지 단추 (상단 → 하단, 하단 → 상단, 오른쪽 → 왼쪽 및 왼쪽 → 오른쪽)를 포함하여 원하는대로 쉽게 사용할 수 있습니다..

데모보기
소스 다운로드