結果のプレビュー
押してフルスクリーンプレビューへのリンクをクリックして、現在のページをプレビューする権利「プレビュー]をクリックします」ボタンをクリックします。
https://codepen.io/comehope/pen/BxbQJj
インタラクティブなビデオチュートリアル
このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。
クロム、サファリ、エッジオープンビューを使用してください。
ソースコードのダウンロード
毎日のフロントエンド戦闘シリーズ完全なソースコードは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つの方向の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;
}
4つの回転要素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>
私たちは完了です。