평면 변형, 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; 여러 애니메이션 호출

애플리케이션

스프라이트 애니메이션
마키 디스플레이

여섯, CSS 빠른 개요 - 평면 변환, 3D 변환, 애니메이션