Front-end daily combat: # 29 video demonstrates how to transition and animation can do without the flash

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

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

Interactive video tutorials

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/c/crvq8hq

Source code download

Daily front-end combat series full source code can be downloaded from github:

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

Code Reading

Define dom, a container comprises four sub-elements, each sub-element of the content is a pile slash:

<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>

Centered:

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

Is defined container sizes:

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

Hiding the contents of the container beyond:

.wall {
    overflow: hidden;
}

The four elements in four directions of rotation, perpendicular to each other:

.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);
}

Locate them, form a square:

.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 the four rotating elements:

.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);
}

The bold diagonal lines, amplification:

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

Finally, the slash dom surrounded by <marquee> tag:

<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>

We're done!