响应布局与3d翻转菜单

Question

我正在创建一个基于bootstrap的网站。我正在尝试集成3D翻转菜单，而不是当前菜单中显示的上述演示中使用这两个菜单

1. For 1200px plus grid size
2. For less than 720px grid size

Before Integration

和

Upon Integrating it To this is what it looks like

在第一种情况下，没有硬编码高度和宽度，菜单没有达到所需的宽度和高度。我希望我的菜单在集成后在集成检查之前具有菜单的高度和宽度以查看差异

我该如何解决这个问题？

HTML

  <div id="Nav_Wrapper">
    <ul id="Navig">
      <li>
        <a href="#"></a>
        <div class="cube">
          <div class="flippety">
            <h1>Home</h1>
          </div>
          <div class="flop">
            <h2>Home</h2>
          </div>
        </div>
      </li>
      <li>
        <a href="#"></a>
        <div class="cube">
          <div class="flippety">
            <h1>Services</h1>
          </div>
          <div class="flop">
            <h2>Services</h2>
          </div>
        </div>
      </li>
      <li>
        <a href="#"></a>
        <div class="cube">
          <div class="flippety">
            <h1>About Us</h1>
          </div>
          <div class="flop">
            <h2>About Us</h2>
          </div>
        </div>
      </li>
      <li>
        <a href="#"></a>
        <div class="cube">
          <div class="flippety">
            <h1>Contact us</h1>
          </div>
          <div class="flop">
            <h2>Contact us</h2>
          </div>
        </div>
      </li>
    </ul>
  </div>

1200px的CSS

#Nav_Wrapper {
    min-height: 120px;
    background-color: #292929;
    margin: 0;
}

#Nav_Wrapper #Navig li {
    float: left;
    list-style: none;
    margin: 0px 0px 0px 0px;
}

#Nav_Wrapper #Navig  li>a {
    text-decoration: none;
}

/* Container box to set the sides relative to */
.cube {
    width: 100%;
    text-align: center;
        /*margin: 0 auto;*/
    position: relative;
    height: 80px;
    top: 0px;
    left: 0px;
    -webkit-transition: -webkit-transform .33s;
    transition: transform .33s;
     /* Animate the transform properties */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* <-NB */;
}

/* The two faces of the cube */
.flippety {
    text-decoration: none;
    margin: 0px 10px 0px 0px;
    padding: 0px;
    font-weight: 800;
    font-size: 25px;
    color: #fff;
    background-color: #292929;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.flop {
    margin: 0px 10px 0px 0px;
    font-weight: 800;
    font-size: 25px;
    border: 1px;
    color: #777;
    background-color: #323232;
    border-width: 0px 0px 5px 0px;
    border-color: #fff;
    border-style: solid;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* Position the faces */
.flippety {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
}

.flop {
    -webkit-transform: rotateX(-90deg) translateZ(-50px);
    transform: rotateX(-90deg) translateZ(-50px);
}

/* Rotate the cube */
.cube:hover {
    -webkit-transform: rotateX(89deg);
    transform: rotateX(89deg);
    /* Text bleed at 90º */;
}

body {
    perspective: 1000px;
}