Javascript 如何对3D立方体进行smouth旋转并检测屏幕设备前面的人脸

我已经创建了一个3D立方体，用户可以用鼠标旋转它，每个面都包含一个图像，我想检测哪个面在用户前面“或设备屏幕”，我想如果用户旋转立方体，它会自动定向“立方体不会弯曲”+立方体附近文本的自动外观

$（函数（）{
var el=document.createElement（'div'），
transformProps='transform WebKittTransform MozoTransform msTransform'.split（''），
transformProp=支架（transformProps），
transitionDuration='transitionDuration WebKitt transitionDuration MozTransitionDuration OrtTransitionDuration msTransitionDuration'。拆分（“”），
transitionDurationProp=支撑（transitionDuration）；
功能支持（道具）{
for（变量i=0，l=props.length；i1））{
event.preventDefault（）；
//联系公司
event.originalEvent.touchs？event=event.originalEvent.touchs[0]：空；
$（'.viewport'）。触发器（'move-viewport'{
x:event.pageX，
y:event.pageY
});
}
});
$（document）.bind（'mouseup touchend'，function（）{
$（文档）.unbind（'mousemove touchmove'）；
});
});
$（'.viewport'）.bind（'move-viewport'，函数（evt，movedMouse）{
//减少触摸屏上的移动
var movementScaleFactor=touch？6:1；
如果（！mouse.last）{
mouse.last=mouse.start；
}否则{
if（前进（mouse.start.x，mouse.last.x）！=前进（mouse.last.x，movedMouse.x））{
mouse.start.x=mouse.last.x；
}
if（前进（mouse.start.y，mouse.last.y）！=前进（mouse.last.y，movedMouse.y））{
mouse.start.y=mouse.last.y；
}
}
viewport.move({
x:viewport.x+parseInt（（mouse.start.y-movedMouse.y）/movementScaleFactor），
y:viewport.y-parseInt（（mouse.start.x-movedMouse.x）/movementScaleFactor）
});
mouse.last.x=movedMouse.x；
mouse.last.y=movedMouse.y；
功能前进（v1、v2）{
返回v1>=v2？真：假；
}
});
});
.viewport{
-webkit透视图：800px；
-webkit透视图来源：50%200px；
-webkit变换：比例（0.75,0.75）；
-moz透视图：800px；
-moz透视原点：50%200px；
-moz变换：比例（0.75,0.75）；
透视图：800px；
透视原点：50%200px；
变换：比例（0.80,0.80）；
}
.立方体{
位置：相对位置；
保证金：0自动100px；
高度：400px；
宽度：400px；
-webkit转换：-webkit转换50ms线性；
-webkit变换样式：保留-3d；
-webkit变换：rotateX（-10度）rotateY（20度）；
-moz变换：-moz变换50ms线性；
-moz变换样式：preserve-3d；
-莫兹变换：rotateX（-10度）rotateY（20度）；
过渡：50ms线性变换；
变换样式：保留-3d；
变换：rotateX（-10度）rotateY（20度）；
}
.立方体h2{
颜色：#fff；
填充顶部：0；
边际上限：0；
}
.立方体a{
颜色：#fff；
}
.cube>div{
/*盒影：0px 0px 300px#fffdc4*/
位置：绝对位置；
高度：370px；
宽度：370px；
填充：20px；
背景色：#e4f2ff99；
字号：1em；
线高：1米；
颜色：#fff；
边框：1px实心#fe7f7f；
边界半径：20px；
}
.cube>div:悬停{
/*盒影：0px 0px 100px#343a4094*/
盒影：0px 0px 100px#b3d7ff；
背景色：#FFFFFF D1；
}
.cube>div:第一个孩子{
-webkit变换：rotateX（90度）translateZ（200像素）；
-moz变换：rotateX（90度）translateZ（200像素）；
变换：rotateX（90度）translateZ（200像素）；
}
.cube>div:n个子项（2）{
-webkit转换：translateZ（200px）；
-moz变换：translateZ（200px）；
变换：translateZ（200px）；
}
.cube>div:n子级（3）{
-webkit变换：旋转（90度）平移（200像素）；
-莫兹变换：旋转（90度）平移（200像素）；
变换：旋转（90度）平移（200像素）；
文本对齐：居中；
}
.cube>div:n个子项（4）{
-webkit变换：旋转（180度）变换