js实现一个可旋转立方体模型。

这是一个简单的立方体应用程序，他是许多立方旋转的基础，如实现三维旋转木马图。

旋转立方体效果

{填充：0；边距：0 }
img { 0 }边境：
列表样式：无}
UL {宽度：200px；高度：200px；保证金：100px汽车；
位置：相对；- WebKit变换风格：preserve-3d；
观点：100px / * * /；
}
继续围绕中心轴旋转。
李{宽度：200px；高度：200px；位置：绝对的；文本对齐：中心；线高度：200px；字体大小：80px；font-weight: bold；颜色：# FFF；}
六表面结构
李：nth-child（1）{背景：RGBA（255,0,0,1）；- WebKit的变换：rotatex（90度）translatez（100）；}
李：nth-child（2）{背景：RGBA（0255255,1）；- WebKit的变换：rotatex（270deg）translatez（100）；}
李：nth-child（3）{背景：RGBA（2550255,1）；- WebKit的变换：rotatey（90度）translatez（100）；}
李：nth-child（4）{背景：RGBA（0255,0,1）；- WebKit的变换：rotatey（270deg）translatez（100）；}
李：nth-child（5）{背景：RGBA（200200,0,1）；- WebKit的变换：translatez（- 100像素）；}
李：nth-child（6）{背景：RGBA（00255,1）；- WebKit的变换：translatez（100）；}
按钮{。
宽度：200px；保证金：20px汽车；
职位：相对；
光标：指针；
}
输入{
宽度：50px；身高：30px；
位置：绝对；
光标：指针；
}
绝对定位按钮
输入：nth-child（1）{左：100px；顶：0 }
输入：nth-child（2）{左：200px；顶部：50px；}
输入：nth-child（3）{左：0px；顶部：50px；}
输入：nth-child（4）{左：100px；顶部：100px；}
输入：nth-child（5）{左：100px；顶部：50px；}
在window.onload =函数（）{
var x＝0，y＝0；
VaR UL = document.getelementbyid（'ul）；
无功输入= document.getelementsbytagname（输入的）；
对于（var i = 0；i < inputs.length；i++）{
输入{我} onclick=运行；
}
函数运行（）{
渐变
ul.style.webkittransition = - WebKit 3s线性变换；
ul.style.otransition = - o-transform 3s线性；
ul.style.transition = 'transform 3s线性；
旋转规则，是x，y。
如果（输入{ 0 } =这个）{ x＝90；}
如果（输入{ 1 } = this），{ +＝90；}
如果（输入{ 2 } =这个）{ = 90；}
如果（输入{ 3 } =这个）{ x＝90；}
如果（输入{ 4 } = this）{
x＝0；y＝0；
ul.style.webkittransition =-webkit-transform.1s线性；
ul.style.otransition =-o-transform.1s线性；
ul.style.transition =transform.1s线性；
}
ul.style.webkittransform = 'rotatex（+ x + 'deg）rotatey（+ Y + 'deg '）'；
ul.style.otransform = 'rotatex（+ x + 'deg）rotatey（+ Y + 'deg '）'；
ul.style.transform = 'rotatex（+ x + 'deg）rotatey（+ Y + 'deg '）'；
}
Document.addEventListener（'keydown功能（e）{
UL。风格。webkittransition = - WebKit 3s线性变换；
开关（能）{
案例37：y = 90； /左箭头
打破；
案例38：x = 90；
打破；
案例39：y = 90； /向下箭头
打破；
案例40：x = 90； /右箭头
打破；
案例13：x = 0；y = 0；返回（当车辆快速返回初始状态）
UL。风格。webkittransition = - WebKit 0.1s线性变换；
打破；
}
ul.style.webkittransform = rotatex（X度（rotatey）+ Y +度）； / /转化效果（沿X轴和Y轴）
}，false）；document.addeventlistener（keydown
ul.style.webkittransition = - WebKit 3s线性变换；
ul.style.otransition = - o-transform 3s线性；
ul.style.transition = 'transform 3s线性；
开关（能）{
案例37：
}
}）
函数（运行）{
UL。风格。webkittransition = - WebKit变换3s线性的； / /集属性，魔方变换时间、动画类型
如果（输入{ 0 } =这个）{ x＝90；}
如果（输入{ 1 } = this），{ +＝90；}
如果（输入{ 2 } =这个）{ = 90；}
如果（输入{ 3 } =这个）{ x＝90；}
如果（输入{ 4 } = =这）{ x = 0；y = 0 ul。风格。webkittransition = - WebKit的变换；0.1s线性；} / /当你点击重置按钮，迅速回到初始状态。
ul.style.webkittransform = rotatex（X度（rotatey）+ Y +度）； / /转化效果（沿X轴和Y轴）
}
}

一
二
三
四
五
六