1 <！DOCTYPE HTML > 2 < HTML のlang = "EN" > 3 4 < ヘッド> 5 < メタのcharset = "UTF-8" > 6 < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0 " > 7 < メタHTTP-当量=" X-UA-互換」コンテンツ= "IE =縁" > 8 < タイトル> 3D导航栏</ タイトル> > 10 * { 11 マージン：0 。 12 パディング：0 。 13 } 14 15 UL { 16 マージン：100ピクセル。 17 } 18 19 リチウム{ 20 リストスタイル：なし。 21 } 22 23 のULのLi { 24 フロート：左; 25 幅：120ピクセル; 26 高さ：35px ; 27 } 28 29 ■は{ 30 パースペクティブ：500pxなど。 31 位置：相対。 32 幅：100％ 。 33 高さ：100％ 。 34 トランスフォームスタイル：保存-3D 。 35 トランジション：2Sすべて; 36 } 37 38 ■は：ホバー{ 39が 変換：回転X（90deg） 。 40 } 41 42 .front、 43 .bottom { 44 位置：絶対。 45 上部：0 。 46は 左：0 ; 47 幅：100％ 。 48 高さ：100％ 。 49 色：#FFF ; 50 フォント重量：太字。 51 テキスト整列：センター。 52 行の高さ：35px ; 53 } 54 55 .front { 56 背景色：ピンク。 57 変換：translate3d（0、0、17.5px） 。 58 / * のborder-top-左半径：10pxの; * / 59 / *border-top-右半径：10pxの; * / 60 } 61 62 .bottom { 63 背景色：紫; 64 変換：translate3d（0、17.5px、0）回転X（-90deg） 。 65 / * ボーダー左下半径：10pxの。* / 66 / * ボーダー右下半径：10pxの。* / 67 } 68 </ スタイル> 69 </ ヘッド> 70 71 < ボディ> 72 <UL > 73 < リチウム> 74 < DIV クラス= "ボックス" > 75 < DIV クラス= "フロント" > 2333 </ DIV > 76 < DIV クラス= "底" > 1551 </ DIV > 77 </ DIV > 78 < / 李> 79 < リチウム> 80 < DIV クラス= "ボックス" > 81 <div クラス= "フロント" > 2333 </ DIV > 82 < DIV クラス= "底" > 1551 </ DIV > 83 </ DIV > 84 </ 李> 85 < リチウム> 86 < DIV クラス= "ボックス" > 87 < DIV クラス= "フロント" > 2333 </ divの> 88 < divのクラス= "下" >1551 </ DIV> 89 </ DIV > 90 </ 李> 91 < リチウム> 92 < DIV クラス= "ボックス" > 93 < DIV クラス= "フロント" > 2333 </ DIV > 94 < DIV クラス= "底" > 1551 </ DIV > 95 </ DIV > 96 </ 李> 97 </ UL > 98 </ ボディ> 99 100 </ HTML >
3Dナビゲーションは、底部要素になるであろう90度回転
ので、双方が傾斜し、正当化することができない、私自身溶液は地平線を広げることです
視点：999999px、より良い方法があったかどうかを知りません。