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
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
