CSS3에서 이미지 뒤집기를 구현하는 방법

오늘은 CSS3의 지식을 활용하여 이미지 뒤집기 기능을 만드는 방법을 공유하겠습니다. CSS3의 이미지 뒤집기 효과는 주로 전환 애니메이션 및 변환 회전 애니메이션을 설정하여 얻을 수 있습니다.

[추천 과정: CSS3 Tutorial]

Case Analysis

이미지 뒤집기 효과 아이디어: 먼저 위치 지정을 사용하여 두 이미지를 서로 겹치게 하고 뒷면의 이미지도 숨겨야 하므로 효과는 페이지에 그림이 하나만 있는데 마우스를 누르면 뒤에 있는 그림이 회전하여 앞에 표시되고, 원래 앞에 있던 그림은 회전되어 뒤에 숨겨지는 효과입니다.

(1) position: 위치 지정

relative: 상대 위치 지정

absolute: 절대 위치 지정

(2) backface-visibility: 회전된 div 요소의 뒷면 숨기기

visible: 뒷면이 표시됨

hidden: the back은 보이지 않습니다

(3) z-index 속성

요소의 스택 순서를 설정합니다. 값이 클수록 레벨이 높아지고 페이지에 더 빨리 표시됩니다.

(4) 전환 속성: 전환 효과가 필요한 CSS 속성 이름

없음: 전환 효과를 받는 속성이 없습니다.

all: 모든 속성이 전환 효과를 받습니다.

속성: 전환 효과를 적용하는 CSS 속성 이름 목록을 정의합니다. 목록은 구분됩니다. 쉼표로.

(5) 전환 기간: 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)

(6) 전환 타이밍 기능: 전환 효과를 완료하는 속도 곡선

선형: 균일한 속도

용이성: 처음에는 느리게, 그 다음에는 빠르게, 그 다음에는 다시 느리게 천천히 시작했다가 점점 더 빨라졌다가 천천히 끝나는 전환 효과를 지정합니다(cubic-bezier(0.25,0.1,0.25,1)).​ ​

​ 큐빅-베지어(n,n,n,n): 큐빅-베지어 함수에서 자신만의 값을 정의하세요. 가능한 값은 0과 1 사이의 값입니다.

(7) Transition-delay: 전환 효과의 지연 여부 및 시작 시기

(8) 변환 속성: 요소에 2D 또는 3D 변형 적용

예:rotateX(180deg): X를 따라 180도 회전 -axis

참고 브라우저 호환성 문제

-moz-: Firefox
-webkit-: Safari 및 Chrome
-o-: Opera

전체 코드:

이 사례는 Chrome 브라우저에서 실행됩니다.

<br/>

Rendering

동적 효과

요약: 위 내용은 이 글의 전체 내용입니다. 이 글의 공유를 통해 모든 분들이 사진 뒤집기에 대해 어느 정도 이해하시기를 바랍니다.

위 내용은 CSS3에서 이미지 뒤집기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!