Html 旋转带有透视错误的三维立方体？

我用

html

和

css

制作了一个旋转立方体

当我按下向右和向左箭头键时，立方体将按预期的方式围绕其中心旋转。但是，当我按下向上和向下箭头键时，它会在更大的空间中旋转

在这种情况下，我也希望它围绕中心旋转。我已经尝试了

margin:0 auto

，如您所见，但这只会将电子立方体放置在网页的中央

$（文档）.ready（函数（）{
var-yAngle=0；
var xAngle=0；
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（e.keyCode=='39'）{
杨乐=杨乐+5；
$（“section”）.css（“transform”和“rotateY”（“+yAngle+”deg）”）；
}
如果（e.keyCode=='37'）{
杨乐=杨乐-5；
$（“section”）.css（“transform”和“rotateY”（“+yAngle+”deg）”）；
}
如果（e.keyCode=='38'）{
xAngle=xAngle+5；
$（“section”）.css（“transform”、“rotateX（“+xAngle+”deg）”）；
}
如果（e.keyCode=='40'）{
xAngle=xAngle-5；
$（“section”）.css（“transform”，“rotateX（'+xAngle+'deg）”）；
}
}
$（“#按钮_左”）。单击（函数（）{
杨乐=杨乐-1；
$（“section”）.css（“transform”和“rotateY”（“+yAngle+”deg）”）；
});
$（“#按钮_右”）。单击（函数（）{
杨乐=杨乐+1；
$（“节”）.css（“变换”、“旋转”（+yAngle+“deg”）；
});
$（“#按下按钮”）。单击（函数（）{
xAngle=xAngle-1；
$（“section”）.css（“transform”，“rotateX（'+xAngle+'deg）”）；
});
$（“#按钮向上”）。单击（函数（）{
xAngle=xAngle+1；
$（“section”）.css（“transform”、“rotateX（“+xAngle+”deg）”）；
});
});
。按钮{
对齐：居中；
}
.包裹{
透视图：800px；
透视原点：50%100px；
}
.立方体{
保证金：0自动；
位置：相对位置；
宽度：200px；
变换样式：保留-3d；
}
.cube div{
盒影：嵌入0.20px rgba（125125,0.9）；
位置：绝对位置；
宽度：200px；
高度：200px；
}
.回来{
背景：rgba（40,40,40,0.8）；
变换：translateZ（-100px）旋转（180度）；
}
.对{
背景：rgba（189,25400,0.3）；
变换：旋转（-270度）translateX（100像素）；
变换原点：右上角；
}
.左{
背景：rgba（189,25400,0.3）；
变换：旋转（270度）translateX（-100px）；
变换原点：左中；
}
.顶{
背景：rgba（189,25400,0.3）；
变换：rotateX（-90度）translateY（-100px）；
变换原点：顶部中心；
}
.底部{
背景：rgba（189,25400,0.3）；
变换：旋转（90度）平移（100像素）；
变换原点：底部中心；
}
.前线{
背景：rgba（189,25400,0.3）；
变换：translateZ（100px）；
}















尝试以相同的数量配置所有转换。在第一节中使用xAngle+/-5，在第二节中使用xAngle+/-1。我认为出于某种原因，它正在查找y轴的事件名称，但它正在处理x轴的关键代码，因为这些代码使用步骤5，您将看到更大的增量/减量。
因为您的容器
.cube
没有高度，所以在您的页面中，所有子级
div
都有
位置：绝对它不会被它的子对象扩展，所以它的大小是200px（这是在css中指定的）x0px，所以它会在
（100px，0px）
处旋转y中心

解决方案，给
.cube
一个高度，使其在中心旋转
（100px，100px）


$（文档）.ready（函数（）{
var-yAngle=0；
var xAngle=0；
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（e.keyCode=='39'）{
杨乐=杨乐+5；
$（“section”）.css（“transform”和“rotateY”（“+yAngle+”deg）”）；
}
如果（e.keyCode=='37'）{
杨乐=杨乐-5；
$（“section”）.css（“transform”和“rotateY”（“+yAngle+”deg）”）；
}
如果（e.keyCode=='38'）{
xAngle=xAngle+5；
$（“section”）.css（“transform”、“rotateX（“+xAngle+”deg）”）；
}
如果（e.keyCode=='40'）{
xAngle=xAngle-5；
$（“section”）.css（“transform”，“rotateX（'+xAngle+'deg）”）；
}
}
$（“#按钮_左”）。单击（函数（）{
杨乐=杨乐-1；
$（“section”）.css（“transform”和“rotateY”（“+yAngle+”deg）”）；
});
$（“#按钮_右”）。单击（函数（）{
杨乐=杨乐+1；
$（“节”）.css（“变换”、“旋转”（+yAngle+“deg”）；
});
$（“#按下按钮”）。单击（函数（）{
xAngle=xAngle-1；
$（“section”）.css（“transform”，“rotateX（'+xAngle+'deg）”）；
});
$（“#按钮向上”）。单击（函数（）{
xAngle=xAngle+1；
$（“section”）.css（“transform”、“rotateX（“+xAngle+”deg）”）；
});
});
。按钮{
对齐：居中；
}
.包裹{
透视图：800px；
透视原点：50%100px；
}
.立方体{
保证金：0自动；
位置：相对位置；
宽度：200px；
高度：200px；
变换样式：保留-3d；
变换原点：中心；
}
.cube div{
盒影：嵌入0.20px rgba（125125,0.9）；
位置：绝对位置；
宽度：200px；
高度：200px；
}
.回来{
背景：rgba（40,40,40,0.8）；
变换：translateZ（-100px）旋转（180度）；
}
.对{
背景：rgba（189,25400,0.3）；
变换：旋转（-270度）translateX（100像素）；
变换原点：右上角；
}
.左{
背景：rgba（189,25400,0.3）；
变换：旋转（270度）translateX（-100px
.cube {
    margin: 0 auto;
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform-origin: center center;
}