프런트 엔드 매일 전투 : # 29 영상은 플래시없이 할 수있는 방법 전환 및 애니메이션을 보여줍니다

결과 미리보기

를 눌러 전체 화면 미리보기의 링크를 클릭, 현재 페이지를 미리 볼 수있는 권리 "미리보기를 클릭"버튼을 누릅니다.

https://codepen.io/comehope/pen/BxbQJj

대화 형 비디오 자습서

이 비디오는 상호 작용, 당신은 비디오를 편집, 코드 비디오를 일시 정지 할 수 있습니다.

제발 사용 크롬, 사파리, 가장자리 개방 볼 수 있습니다.

https://scrimba.com/c/crvq8hq

소스 코드 다운로드

매일 프런트 엔드 전투 시리즈 전체 소스 코드는 GitHub의에서 다운로드 할 수 있습니다 :

https://github.com/comehope/front-end-daily-challenges

코드 읽기

용기는 4 개의 하위 구성 요소를 포함하고, DOM 정의 콘텐츠의 각 서브 요소는 더미 슬래시이다 :

<div class="frame">
    <div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
    <div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
    <div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
    <div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
</div>

중심 :

body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

정의 된 컨테이너의 크기입니다 :

.frame {
    width: 100vmin;
    height: 100vmin;
    background-color: whitesmoke;
}

컨테이너 너머의 내용을 숨기기 :

.wall {
    overflow: hidden;
}

수직 서로 회전 네 방향에서 4 개 개의 요소 :

.wall {
    transform-origin: 0 0;
}

.wall.top {
    transform: rotate(0deg);
}

.wall.right {
    transform: rotate(90deg);
}

.wall.bottom {
    transform: rotate(180deg);
}

.wall.left {
    transform: rotate(270deg);
}

사각형을 형성을 찾습니다

.frame {
    position: relative;
}

.wall {
    position: absolute;
    width: 100%;
}

.wall.top {
    top: 0;
    left: 0;
}

.wall.right {
    top: 0;
    left: 100%;
}

.wall.bottom {
    top: 100%;
    left: 100%;
}

.wall.left {
    top: 100%;
    left: 0;
}

네 개의 회전 요소를 3D :

.frame {
    perspective: 40vmin;
}

.wall.top {
    transform: rotate(0deg) rotateX(-90deg);
}

.wall.right {
    transform: rotate(90deg) rotateX(-90deg);
}

.wall.bottom {
    transform: rotate(180deg) rotateX(-90deg);
}

.wall.left {
    transform: rotate(270deg) rotateX(-90deg);
}

굵은 대각선 증폭 :

.wall {
    font-size: 75vmin;
    font-weight: bold;
}

마지막으로, 슬래시 DOM은 <천막> 태그로 둘러싸여 :

<div class="frame">
    <div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
    <div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
    <div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
    <div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
</div>

우리는 완료!