ハニカムメニューをHTMLで実装するサンプルコード

@keyframes _fade-in_mkmxd_1 {
    0% {
        フィルター: ぼかし(20px);
        不透明度: 0
    }
    に {
        フィルター: なし。
        不透明度: 1
    }
}
@keyframes _drop-in_mkmxd_1 {
    0% {
        変換: var(--transform) 変換Y(-100px) 変換Z(400px)
    }
    に {
        変換: var(--transform)
    }
}
._examples_mkmxd_3 {
    マージントップ:200px;
    位置: 相対的;
    幅:1000ピクセル;
    高さ: 640ピクセル;
    トランジション: トランスフォーム 0.15 秒イーズアウト。
    フィルター: ドロップシャドウ(0 4px 18px rgba(0,0,0,1));
    --グリッド幅: 140ピクセル;
    左: 50%。
    変換: 変換(-50%, 0px);
}
._examples_mkmxd_3 div {
    位置: 相対的;
    トランジション: フィルター 0.25 秒のイーズアウト。
    アニメーション: _fade-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--lay) 逆方向;
}
._examples_mkmxd_3 div:hover {
    フィルター: ドロップシャドウ(0 4px 8px rgba(0,0,0,.4));
    z インデックス: 3;
}
._examples_mkmxd_3 a {
    位置: 絶対;
    --transform: 視点(75em) 回転X(0度) 回転Z(-0度) 変換(calc(var(--x) * 100%), calc(var(--y) * 86.67%)) スケール(1.145);
    変換: var(--transform);
    アニメーション: _drop-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--lay) を逆方向に実行します。
    トランジション: トランスフォーム 0.25 秒イーズアウト;
    /*クリップパス: ポリゴン(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*/
    /*クリップパス: ポリゴン(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%);*/
    クリップパス: ポリゴン(25% 87%,75% 87%,98.3% 50%,75% 13%,25% 13%,1.7% 50%);
}
._examples_mkmxd_3 a:ホバー{
    変換：var(--transform)translateZ(10px)scale(1.1);
}
._examples_mkmxd_3 img {
    アスペクト比: 1;
    オブジェクトフィット: カバー;
    高さ: 64ピクセル;
    幅: 64ピクセル;
    変換: 変換(-50%, 40px);
    左: 50%。
    位置: 絶対;
    /*フィルター: ドロップシャドウ(2px 2px 0px #00BFFF);*/
}
画像 {
    最大幅: 100%;
    高さ: 自動;
    表示: ブロック;
}
*{
    ボックスのサイズ設定: ボーダーボックス;
}
.メニューボックス{
    表示: ブロック;
    幅:200ピクセル;
    高さ:200ピクセル;
    /*背景:rgba(84, 109, 231,.6);*/
    背景: 中紫;
    位置: 相対的;
}
.menu-text{
    色: #fff;
    位置: 絶対 !重要;
    上: 120ピクセル;
    左: 50%。
    フォントの太さ: 太字;
    変換: 変換(-50%, 0px);
    /*フィルター: ドロップシャドウ(2px 2px 0px #00BFFF);*/
    フォントサイズ: 16px;
    テキスト整列: 中央;
}
.back-img{
    幅: 64px !重要;
    位置: 絶対;
    左: 50%。
    変換: 変換(-50%, 20px);
    /*フィルター: ドロップシャドウ(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{
    色: #00BFFF;
    フィルター: ドロップシャドウ(2px 2px 0px #fff);
}

 <div class="_examples_mkmxd_3" >
    <div v-for="(item,index) in tempData" :key="index" :style="{'--lay': item.showTime}">
        <a href="#" :title="item.name" @mouseenter="menuEnter(item)" @mouseleave="menuLeave(item)" @click="menuClick(item,tempData)" :style="{' --x': item.x、'--y': item.y}">
            <span class="menu-box" :style="{'background':item.color}">
                <img v-if="item.name!=='上一层'" :src="item.imgPath?item.imgPath:'../img/navigation/火车站.png'" >
                <img v-if="item.imgPath&&item.name==='上一层'" :src="item.imgPath" class="back-img">
                <span class="menu-text">{{item.name}}</span>
            </スパン>
        </a>
    </div>
</div>

新しい Vue({
    el:'#app',
    データ（）{
        戻る {
            メニューデータ:[
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[
                        {
                            x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[
                                {
                                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
                                }、
                                {
                                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
                                }、
                            】
                        }、
                        {
                            x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                        }、
                        {
                            x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                        }、
                    】
                }、
                {
                    x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'../img/navigation/火车站.png',子供:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
                }、
                {
                    x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
                }、
                {
                    x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                }、
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                }、
            ]、
            tempData:[]、         
            色：[
                '#1874CD'、'#3CB371'、'#FF7F50'、'#CD1076'、'#CD00CD'、
                '#1C86EE'、'#00FF7F'、'#FF8C00'、'#EE1289'、'#EE00EE'、
                '#1E90FF'、'#00FF00'、'#FFA500'、'#FF1493'、'#FF00FF'、
            】
        }
    }、
    時計：{
        menuData(){
            this.initCoor()
        }
    }、
    マウントされた(){
        _this = これにしましょう
        this.getUser()
        // this.getMenuData()
        this.tempData = this.menuData
        this.initCoor()
        this.timer = setInterval(function(){
            _this.localDate = _this.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
        },1000)
    }、
    破壊されました(){
        clearInterval(this.timer)
    }、
    メソッド:{
        メニュー入力(項目){
            if(item.name==='上一层')
                戻る
            this.msgData = アイテム
            this.msgShow = true
        }、
        menuLeave(項目){
            this.msgShow = false
        }、           
        showTime(アイテム){
            if(item.name==='上一层')
                「0」を返す
            Math.random()+ を返します。
        }、
        menuClick(項目,親){
            arr =[]にしましょう
            if(item.name==='上一层'){
                this.changeMenu(item.children)
            }else if(item.children.length>0){
                arr.push({x:0,y:0,path:'',name:'上一层',imgPath:'../img/navigation/icon-返上一级.png',children:parant} ）
                item.children.forEach(t=>{
                    arr.push(t)
                })
                this.changeMenu(arr)
            }それ以外{
                window.location.href = item.path
            }
        }、
        変更メニュー(データ){
            _this = これにしましょう
            this.tempData = []
            setTimeout(function(){
                _this.tempData = データ
                _this.initCoor()
            },10)
        }、
        initCoor(){
            this.tempData.forEach((t,index)=>{
                t.color = this.colors[インデックス]
                t.showTime = this.showTime(t)
                if(!t.children){
                    t.children = []
                }               
                if(インデックス<5){
                    ty=0
                    tx=インデックス*0.86
                    if(インデックス%2!==0){
                        ty += 0.5
                        // tx = (インデックス-1)+0.8
                    }
                }else if(インデックス>4&&インデックス<10){
                    ty=1
                    tx=(インデックス-5)*0.86
                    if(インデックス%2===0){
                        ty += 0.5
                        // tx = (インデックス-1)+0.8
                    }
                }else if(インデックス>9&&インデックス<15){
                    ty=2
                    tx=(インデックス-10)*0.86
                    if(インデックス%2!==0){
                        ty += 0.5
                        // tx = (インデックス-1)+0.8
                    }
                }
            })
        }、      
    }
})