CSS3 は 3D キューブの読み込み効果を作成します

<link rel="スタイルシート" type="text/css" href="css/bootstrap-grid.min.css" />

<div class="demo" style="min-height:350px;">
<div class="コンテナ">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</div>
</div>
</div>
</div>
</div>

。ローダ{
                    --サイズ: 32px;
                    --期間: 800 ミリ秒;
                    幅: 96px;
                    高さ: 64px;
                    マージン: 50px 自動;
                    変換スタイル: 3D を保持します。
                    変換の原点: 50% 50%;
                    変換: rotateX(60度) rotateZ(45度) rotateY(0度) translateZ(0px);
                    位置: 相対的;
                }
                .loader .box{
                    幅: 32px;
                    高さ: 32px;
                    変換スタイル: 3D を保持します。
                    位置: 絶対;
                    上: 0;
                    左: 0;
                }
                .loader .box:n番目の子(1){
                    変換: translate(100%, 0);
                    アニメーション: box1 800ms 線形無限;
                }
                .loader .box:n番目の子(2){
                    変換: translate(0, 100%);
                    アニメーション: box2 800ms 線形無限;
                }
                .loader .box:n番目の子(3){
                    変換: translate(100%, 100%);
                    アニメーション: box3 800ms 線形無限;
                }
                .loader .box:n番目の子(4){
                    変換: translate(200%, 0);
                    アニメーション: box4 800ms 線形無限;
                }
                .loader .box > div{
                    --translateZ: calc(var(--size) / 2);
                    --rotateY: 0度;
                    --rotateX: 0度;
                    背景: #5c8df6;
                    幅: 100%;
                    高さ: 100%;
                    変換: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
                    位置: 絶対;
                    上:自動;
                    右: 自動;
                    下部: 自動;
                    左: 自動;
                }
                .loader .box > div:nth-child(1){
                    上: 0;
                    左: 0;
                }
                .loader .box > div:nth-child(2){
                    背景: #145af2;
                    右: 0;
                    --rotateY: 90度;
                }
                .loader .box > div:nth-child(3){
                    背景: #447cf5;
                    --rotateX: -90度;
                }
                .loader .box > div:nth-child(4){
                    背景: #dbe3f4;
                    上: 0;
                    左: 0;
                    --translateZ: calc(var(--size) * 3 * -1);
                }
                @keyframes ボックス1{
                    0%、50%{ 変換: translate(100%、0); }
                    100%{ 変換: 翻訳(200%, 0); }
                }
                @keyframes ボックス2{
                    0%{ 変換: translate(0, 100%); }
                    50%{ 変換: translate(0, 0); }
                    100%{ 変換: translate(100%, 0); }
                }
                @keyframes ボックス3{
                    0%、50%{ 変換: translate(100%、100%); }
                    100%{ 変換: translate(0, 100%); }
                }
                @keyframes ボックス4{
                    0%{ 変換: translate(200%, 0); }
                    50%{ 変換: 翻訳(200%, 100%); }
                    100%{ 変換: 翻訳(100%, 100%); }
                }