평면 변형, 3D 변형, 애니메이션
글꼴 아이콘
- iconfont 알리 아이콘 라이브러리
- 아이콘 라이브러리의 참조 자료
평면 변환
- 전환: 모두 1초, 요소 전환 애니메이션 설정
- transform: translate(px, px); 지정된 픽셀 이동
- transform: translate(x%, y%); 자체 백분율에 비례하여 이동
- 변환: translateX(값) 또는 translateY(값)
- transform: rotate(360deg); 회전점을 사용자 정의할 수 있습니다.
- 변환: 축척(1.2), 확대/축소 비율
- background-image: linear-gradient(색상 1, 색상 2, 색상 3);
번역 앱
- 절대 위치에서 상자 중앙에 놓기
.box { position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; background-color: pink; transform: translate(-50%, -50%); }
- 이중문의 효과를 실현하십시오.
포스터 위로 마우스를 가져가면 포스터가 좌우로 분리되고 양쪽으로 물러나 테마 내용이 나타납니다.
CSS 스프라이트의 원리를 사용하여 왼쪽과 오른쪽 포스터를 분리합니다.* { margin: 0; padding: 0; box-sizing: border-box; } .box { margin: 50px auto; height: 600px; width: 1000px; background-size: 1000px; background-image: url(images/pik_lightning.jpg); overflow: hidden; } .box::before, .box::after { content: ''; float: left; width: 50%; height: 600px; background-size: 1000px; background-image: url(images/pik_poster.jpg); transition: all 1s; } .box::after { background-position: right 0; } .box:hover::before { transform: translateX(-100%); } .box:hover::after { transform: translateX(100%); }
<body> <div class="box"> </div> </body>
애플리케이션 회전
- 휠 롤링: 변환 + 회전
.wheel { transform: translateX(100px) rotate(360deg); }
줌 앱
- 재생 버튼 크기
조정 변환: scale(5), 불투명도: 0,
그래디언트 앱
- 그림을 반 마스크로 만들고 텍스트를 명확하게 표시합니다.
배경 이미지: 선형 그라데이션(투명, rgba(0,0,0,.6));
공간 변환
- 변환: translate3d(x,y,z);
- 변환: translateZ(值);
- 원근법: 인간의 눈에서 화면까지의 거리(px)
변환을 사용하여 원근법 달성: translateZ(value) - 변환: 회전X(값);
- 변환: 회전Y(값);
- transform:rotateZ(값);rotate(값)과 동일
- 변환: rotate3d(x,y,z,deg); 맞춤 축
- 변환: scaleZ(다중);
3D 회전 응용 프로그램
-
변형 스타일 추가 :preserve-3d;.cube { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 2s; transform-style: preserve-3d; } .cube div { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .front { background-color: orange; transform: translateZ(200px); } .back { background-color: green; } .cube:hover { transform: rotateY(180deg); }
<div class="cube"> <div class="front">前面</div> <div class="back">后面</div> </div>
-
3D 내비게이션 바(플롭 효과)는
위와 동일하며 공간에 적절한 3차원 위치를 배치하기만 하면 됩니다.
생기
두 상태 사이의 변화 과정은 전환으로 실현될 수 있으며, 여러 상태 사이의 변화 과정은 애니메이션으로 실현될 수 있습니다(반복 재생, 최종 화면, 일시 정지 여부).
- 애니메이션 정의:
@keyframes { 0% {} 50% {} 110% {} }
- 애니메이션 애니메이션 사용: 애니메이션 이름, 애니메이션 지속 시간, 속도 곡선, 지연 시간, 주기 수, 애니메이션 방향, 실행 완료 상태
- 속도 곡선: 선형 애니메이션 선형, 하위 애니메이션 단계()
- 주기 시간: 주기 시간, 무선 주기 무한대
- 애니메이션 방향: 정방향 및 역방향 교대
- 실행 종료 시 상태: 기본값 뒤로, 앞으로(무한 대체 제거 필요)
- animation-play-state: pause 애니메이션 일시 중지, :hover와 함께 사용.
- animation-timing-function: steps(N) 프레임별 애니메이션, 스프라이트 애니메이션을 만들 때.
- 애니메이션: 애니메이션 1, 애니메이션 2, 애니메이션 3; 여러 애니메이션 호출
애플리케이션
- 스프라이트 애니메이션
- 마키 디스플레이