HTML 5 효과 ~ 3D 큐 브 회전

일단 이 필터 의 최종 효 과 를 감상 해 보도 록 하 겠 습 니 다.












본문 원본 코드 참조http://www.cnblogs.com/ECJTUACM-873284962/약간의 최 적 화 를 진행 하 는데, 다음은 이 특수효과 원리 에 대한 분석 이다.
이 효 과 는 Css 3 의 새로운 특성 을 결합 하여 만 든 것 입 니 다. 주로 hover, transform, @ keyframe 속성 을 사 용 했 습 니 다. 다음은 이 세 가지 속성의 역할 을 약술 하 겠 습 니 다.
자세 한 내용 은 참고 하 시 오http://www.w3school.com.cn/css3/index.asp
hover
효과: 마우스 가 요소 로 이동 할 때 정 의 된 hover 스타일 을 보 여 줍 니 다.
사용 방법: my style 라 는 클래스 가 있다 고 가정 합 니 다. css 스타일 을 수정 하 는 방식 은. my style {} 입 니 다. css hover 스타일 을 수정 하 는 방식 은. my style: hover {} 입 니 다.
transform
효과: 원 소 를 회전, 크기 조정, 이동 또는 기울 이기
사용 방법: 회전 rotate (angle), scale (x, y), 이동 translate (x, y), 경사 skew (angle) 의 매개 변 수 를 입력 하여 속성 을 수정 합 니 다.
@keyframe
효과: 애니메이션 효과 구현
사용 방법: @ keyframe 후 애니메이션 이름 {from: 초기 상태; to: 마지막 상태}
편리 하 게 이해 하기 위해 서, 우 리 는 먼저 그림 이 회전 하 는 데모 버 전 을 보 았 다.

 
 
 
 
 
 
 
코드 분석

다음은 필터 가 실 현 된 전체 코드 입 니 다.

글 이 좋 은 것 같 으 니 칭찬 과 관심 을 가 져 보 세 요.
더 많은 전문 전단 지식, 올 라 가세 요.
【 원숭이 2048 】 www. mk 2048. com