Jquery动画div边距似乎会根据窗口大小调整而改变

Question

问题：我有一个动画div，它实际上是一个立方体的2D渲染，每个面都是一个新页面。但是，每当页面调整大小时（例如在移动设备或平板电脑或巨型桌面上），方块的左侧和右侧相对于窗口的边缘改变位置，并且每次转动时都会不同。立方体＆＃34 ;.按照下面的链接，将屏幕调整为更小，然后尝试单击菜单项以查看我的意思。顶部和底部保持不变，但左侧和右侧不断移动到真正的中心。

问题：如何获得＆＃34; cube＆＃34;无论点击哪个菜单项，面部都保持居中？感谢您的帮助，时间和耐心！

网站：http://studiopowell.net/tp.html 相关代码如下：

        <style>
      .face {
      position: absolute;
      height: 100%;
      width: 97%;
      padding: 20px;
      margin: 0 auto;
      background-color:rgba(20,20,20,.5);
      border: solid 1px #ccc;
      pointer-events: none;
    }


    #cube {
      position: relative;
      margin: 0 auto;
      height: 70%;
      width: 80%;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: all 2s ease;
      transform-style: preserve-3d;
      transition: all 2s ease;
      pointer-events: none;
    }

    #cube .one {
      -webkit-transform: rotateX(90deg) translateZ(200px);
      transform: rotateX(90deg) translateZ(200px);
    }

    #cube .two {
      -webkit-transform: translateZ(200px);
      transform: translateZ(200px);
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(200px);
      transform: rotateY(90deg) translateZ(200px);
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(200px);
      transform: rotateY(180deg) translateZ(200px);
    }
    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(200px);
      transform: rotateY(-90deg) translateZ(200px);
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
      transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
    }



    canvas {
        position: absolute;
        top: 0;
        left: 0;
        max-height: 100%;
        max-width:100%;
        min-height: 100%;
        min-width:100%;
    }




    </style>

    <canvas id="c"></canvas>
    <div class="menu"><div id="aboutlink">About</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="futurelink">Future</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="pastlink">Past</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="contactlink">Contact</div></div>
    <div class="text">TRANSVERSAL</br>PROJECT</div>
    <div id="cube">
    <div class="face one"></div>
    <div class="face two"></div>
    <div class="face three"></div>
    <div class="face four"></div>
    <div class="face five"></div>
    <div class="face six"></div>


    </div>



    <script src="http//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
    <script src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){

    $("#aboutlink").click(function(){
       calcRotation(0);
    });
    $("#futurelink").click(function(){
      calcRotation(90);
    });
    $("#pastlink").click(function(){
       calcRotation(180);
    });
    $("#contactlink").click(function(){
    calcRotation(270);
    });
    function calcRotation(rot){
       $("#cube").css("transform", "rotateY(-" + rot + "deg)");
    }
    });
    </script>