怎样把3D立方体的画布(不知道是不是这么叫)整体下移

Question

我在修改这个 HTML和CSS画的3D立方体 时遇到问题：

它的源码在 这里，是里面的touch版本。
Demo在这里!!

我想把下图中 白色部分（即包括立方体）固定在浏览器窗口中间偏下的地方。
试过transform-origin、perspective-origin、translate3d()函数都不行，后来反复查了才觉得自己根本没改到重点位置。
未修改前:

然后试着改margin，只有margin-top才能部分实现我要的效果，但是，如果一竖屏就暴露了，还是不行。用margin-bottom虽然浏览器生效，但是不知道为什么没有效果。
竖屏就暴露了:

下面是我改过的代码： 我就修改了背景色做区分，修改了rotate的角度。添加了margin。
我修改后的源码打包(http://yunpan.cn/QNpkn5PyLEbkw) 访问密码：938e
(打非中，好多盘都不能分享了，先用着360，大家将就一下)

.viewport {
    margin-top: 300px; /*我修改过的*/
    background-color: #FFF; /*我修改过的*/
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;
    -webkit-transform: scale(0.5,0.5);    /*我修改过的*/

    -moz-perspective: 800;
    -moz-perspective-origin: 50% 200px;
    -moz-transform: scale(0.5,0.5);    /*我修改过的*/
}

.cube {
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 400px;
    color: #FFF; /*我修改过的*/

    -webkit-transition: -webkit-transform 50ms linear;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-30deg) rotateY(45deg); /*我修改过的*/

    -moz-transition: -moz-transform 50ms linear;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateX(-30deg) rotateY(45deg); /*我修改过的*/
}

.cube > div {
    position: absolute;
    height: 360px;
    width: 360px;
    padding: 20px;
    background-color: rgba(50, 50, 50, 0.85);
    font-size: 3em; /*我修改过的*/
    text-align: center;  /*我修改过的*/
    line-height: 1em;
    border: 1px solid red; /*我修改过的*/
}

另外还有个奇怪的问题:
在字的方向为正时旋转没问题,如下图

但如果字倒了，左右的旋转方向和鼠标左右的移动方向相反了，如图

该怎么修改？？？

现在差旋转方向问题了

Answer 1

原来是自己css的定位没学清楚，
在这里加上这些代码就行了，最古老的方法
position:fixed或者absolute;/个人看来好像效果都一样，只是好像/
bottom:7%;
可以下移了
加width， 左右auto 就可以水平居中

.viewport {
    position:fixed;
    bottom:7%;
    width:100%;
    margin-left: auto;
    margin-right: auto;
}