Javascript 是否可以在父元素上设置旋转的原点？

我创建了一个3D立方体，当按下左右键时，它在Y轴上顺时针和逆时针旋转，然后当按下向上键时，它在X轴上旋转

我的问题是，由于旋转原点的位置，在我在Y轴上旋转立方体之后，尝试在X轴上旋转立方体不会得到期望的结果，因为旋转轴已经旋转

在Y轴之后在X轴上旋转会使立方体看起来像是在Z轴上旋转。是否可以将旋转原点添加到父元素上，以便轴不受初始旋转的影响

var xAngle=0，
杨乐=25，
赞格勒=0，
rowYAngle=0；
var移动=15；
$（文档）.on（'keydown'，函数（事件）{
console.log（event.keyCode）；
开关（event.keyCode）{
案例37://左
杨乐运动；
打破
案例38://以上
xAngle+=运动；
打破
案例39://对
杨乐运动；
打破
案例40://向下
xAngle-=运动；
打破
};
如果（X角>=360）{
xAngle=0；
};
如果（杨乐>=360）{
杨乐=0；
};
$（“#立方体”）.css({
“-webkit变换”：“rotateY（'+yAngle+'度）rotateX（'+xAngle+'度）rotateZ（'+zAngle+'度）”
});
});
#包装器{
宽度：100%；
身高：100%；
位置：相对位置；
}
#立方体容器{
/*宽度：100%*/
位置：绝对位置；
最高：30%；
左：30%；
}
#立方体视口{
-webkit透视图：600px；
-webkit透视图来源：150px 150px；
最大宽度：600px；
}
#立方体{
位置：相对位置；
高度：300px；
宽度：300px；
-webkit变换样式：保留-3d；
-webkit转换源：50%50%-150px；
-webkit变换：旋转（25度）；
/*不透明度：1；
边框：1px黑色实心*/
}
.行{
-webkit变换样式：保留-3d；
-webkit转换源：50%50%-150px；
高度：自动；
}
#立方{
位置：绝对位置；
保证金：1px；
边框：1px纯黑；
宽度：98px；
高度：98px；
背景尺寸：100px；
不透明度：1；
z指数：-1；
文本对齐：居中；
字体大小：30px；
-webkit转换原点：0；
}
#正方体{
背景色：红色；
}
#立方体，立方背{
背景颜色：蓝色；
}
#正方体，正方体{
背景颜色：绿色；
}
#立方。立方左{
背景颜色：橙色；
}
#立方，立方{
背景颜色：黄色；
}
#立方体{
背景色：白色；
}
.ftl{
-webkit变换：rotateX（0）translate3d（0,0,0）；
}
.fcl{
-webkit转换：rotateX（0）translate3d（0，100px，0）；
}
.联邦调查局{
-webkit转换：rotateX（0）translate3d（0200px，0）；
}
.联邦贸易委员会{
-webkit转换：rotateX（0）translate3d（100px，0，0）；
}
.联邦通信委员会{
-webkit转换：rotateX（0）translate3d（100px，100px，0）；
}
.fbc{
-webkit转换：rotateX（0）translate3d（100px，200px，0）；
}
.ftr{
-webkit变换：rotateX（0）translate3d（200px，0，0）；
}
.fcr{
-webkit转换：rotateX（0）translate3d（200px，100px，0）；
}
.fbr{
-webkit转换：rotateX（0）translate3d（200px，200px，0）；
}
.btl{
-webkit变换：旋转（180度）平移3D（-300px，0，300px）；
}
.bcl{
-webkit变换：旋转（180度）平移3D（-300px，100px，300px）；
}
.bbl{
-webkit变换：旋转（180度）平移3D（-300px，200px，300px）；
}
.btc{
-webkit变换：旋转（180度）平移3D（-200px，0300px）；
}
.密件抄送{
-webkit变换：旋转（180度）平移3D（-200px，100px，300px）；
}
英国广播公司{
-webkit变换：旋转（180度）平移3D（-200px，200px，300px）；
}
.btr{
-webkit变换：旋转（180度）平移3D（-100px，0300px）；
}
B.bcr{
-webkit变换：旋转（180度）平移3D（-100px，100px，300px）；
}
.bbr{
-webkit变换：旋转（180度）平移3D（-100px，200px，300px）；
}
.rtl{
-webkit变换：旋转（90度）平移3D（0,0,300px）；
}
.rcl{
-webkit变换：旋转（90度）平移3D（0，100px，300px）；
}
.rbl{
-webkit变换：旋转（90度）平移3D（0，200px，300px）；
}
.rtc{
-webkit变换：旋转（90度）平移3D（100px，0，300px）；
}
.rcc{
-webkit转换：旋转（90度）转换3D（100px，100px，300px）；
}
.红细胞{
-webkit转换：旋转（90度）转换3D（100px、200px、300px）；
}
rtr先生{
-webkit变换：旋转（90度）平移3D（200px，0，300px）；
}
.rcr{
-webkit转换：旋转（90度）转换3D（200px、100px、300px）；
}
R.先生{
-webkit变换：旋转（90度）平移3D（200px，200px，300px）；
}
.ltl{
-webkit变换：旋转（-90度）平移3D（-300px，0，0）；
}
.lcl{
-webkit转换：旋转（-90度）平移3D（-300px，100px，0）；
}
.lbl{
-webkit变换：旋转（-90度）平移3D（-300px，200px，0）；
}
.ltc{
-webkit变换：旋转（-90度）平移3D（-200px，0，0）；
}
.lcc{
-webkit转换：旋转（-90度）平移3D（-200px，100px，0）；
}
.lbc{
-webkit变换：旋转（-90度）平移3D（-200px，200px，0）；
}
.ltr{
-webkit变换：旋转（-90度）平移3D（-100px，0，0）；
}
.lcr{
-webkit变换：旋转（-90度）平移3D（-100px，100px，0）；
}
lbr先生{
-webkit变换：旋转（-90度）平移3D（-100px，200px，0）；
}
.utl{
-webkit变换：旋转（90度）平移3D（0，-300px，0）；
}
.ucl{
-webkit变换：旋转（90度）平移3D（0，-200px，0）；
}
.ubl{
-webkit变换：旋转（90度）平移3D（0，-100px，0）；
}
.utc{
-webkit转换：旋转（90度）转换3D（100像素，-300像素，0）；
}
.ucc{
-webkit转换：旋转（90度）转换3D（100像素，-200像素，0）；
}
.ubc{
-webkit变换：旋转（90度）平移3D（100px，-100px，0）；
}
.utr{
-webkit变换：旋转（90度）平移3D（200px，-300px，0）；
}
.ucr{
-webkit变换：旋转（90度）平移3D（200px，-200px，0）；
}
.ubr{
-webkit变换：旋转（90度）平移3D（200px，-100px，0）；
}
.dtl{
-webkit变换：旋转（-90度）平移3D(