我用CSS制作了一个立方体，通过按上下和左右键旋转，但是我在旋转方向方面遇到了问题。
尝试 #1
使用这篇文章，我成功地将按键绑定并应用于立方体的旋转。我的第一个问题是CSS transform函数会旋转元素轴，所以当我按上键时，Y轴和Z轴交换位置。我调整了原始代码来解决这个问题，但另一个问题是，由于轴是向量，当我按两次上键时，X轴和Z轴回到原位，但向量被反转了（按左键开始将立方体向右旋转，反之亦然），所以现在我必须向相反的方向旋转立方体才能得到想要的结果，但我不知道如何检测轴是否被反转了。
JavaScript
var xAngle = 0,
yAngle = 0,
zAngle = 0,
cube = $("#cube");
$(document).keydown(function(e) { //keyup maybe better?
e.preventDefault();
var key = e.which,
arrow = {left: 37, up: 38, right: 39, down: 40},
x = xAngle/90,
y = yAngle/90;
switch(key) {
case arrow.left:
if (x%2 == 0)
yAngle -= 90;
else
zAngle += 90;
break;
case arrow.up:
if (y%2 == 0)
xAngle += 90;
else
zAngle -= 90;
break;
case arrow.right:
if (x%2 == 0)
yAngle += 90;
else
zAngle -=90;
break;
case arrow.down:
if (y%2 == 0)
xAngle -= 90;
else
zAngle += 90;
break;
}
var rotate = "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg) rotateZ(" + zAngle + "deg)";
cube.css({"transform":rotate});
});
第二次尝试
我又制作了一个版本，使用了这篇文章中的方法，通过分解和更新 CSS 3D 矩阵来解决同样的问题，但它也有其他问题。在随机方向重复按箭头后，方块的视角会改变（一次可以看到多个面）。
如果我可以从 3D 矩阵中获取旋转值或矢量方向就太好了，但我找到的解决方案似乎都不起作用。我猜想这是因为 3D 矩阵是通过乘以所有传递的函数（rotateX、rotateY 和 translateZ）的值得出的，而这种数学对我来说太过高深了。
JavaScript
var Vector = function(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
WebKitCSSMatrix.prototype.transformVector = function(v) {
var xOut = this.m11*v.x + this.m12*v.y + this.m13*v.z;
var yOut = this.m21*v.x + this.m22*v.y + this.m23*v.z;
var zOut = this.m31*v.x + this.m32*v.y + this.m33*v.z;
return new Vector(xOut, yOut, zOut);
};
function applyRotation(vector, angle) {
var cube = $('#cube');
var matrix = new WebKitCSSMatrix(cube.css('webkitTransform'));
var vector = matrix.transformVector(vector);
var newMatrix = matrix.rotateAxisAngle(vector.x, vector.y, vector.z, angle);
cube.get(0).style.webkitTransform = newMatrix;
}
// rotate using arrow keys
$(document).keyup(function(e) {
e.preventDefault();
var key = e.which,
arrow = {left: 37, up: 38, right: 39, down: 40},
v,
a;
switch(key) {
case arrow.left:
v = new Vector(0,1,0),
a = -90;
break;
case arrow.right:
v = new Vector(0,1,0),
a = 90;
break;
case arrow.up:
v = new Vector(1,0,0),
a = 90;
break;
case arrow.down:
v = new Vector(1,0,0),
a = -90;
break;
}
applyRotation(v, a);
});
第三次尝试
我制作的第三个版本分别旋转每个面，并在旋转后更改类名，因此我始终只需向右旋转X和Y，但是当旋转发生时，立方体被分解，我认为上下旋转是错误的（而且代码有点臃肿丑陋）。这种方法的唯一好处是对于不支持preserve-3d属性的浏览器具有更大的跨浏览器兼容性。
JavaScript
$(document).keyup(function(e) {
e.preventDefault();
var key = e.which,
arrow = {left: 37, up: 38, right: 39, down: 40},
front = "rotateX(0deg) translateZ(100px)",
back = "rotateX(180deg) translateZ(100px)",
right = "rotateY(90deg) translateZ(100px)",
left = "rotateY(-90deg) translateZ(100px)",
top = "rotateX(90deg) translateZ(100px)",
bottom = "rotateX(-90deg) translateZ(100px)";
switch(key) {
case arrow.left:
$(".front").css({"transform":left});
$(".back").css({"transform":right});
$(".left").css({"transform":back});
$(".right").css({"transform":front});
var front = $(".front");
var back = $(".back");
var left = $(".left");
var right = $(".right");
front.removeClass("front").addClass("left");
back.removeClass("back").addClass("right");
right.removeClass("right").addClass("front");
left.removeClass("left").addClass("back");
break;
case arrow.up:
$(".front").css({"transform":top});
$(".back").css({"transform":bottom});
$(".top").css({"transform":back});
$(".bottom").css({"transform":front});
var front = $(".front");
var back = $(".back");
var top = $(".top");
var bottom = $(".bottom");
front.removeClass("front").addClass("top");
back.removeClass("back").addClass("bottom");
top.removeClass("top").addClass("back");
bottom.removeClass("bottom").addClass("front");
break;
case arrow.right:
$(".front").css({"transform":right});
$(".back").css({"transform":left});
$(".left").css({"transform":front});
$(".right").css({"transform":back});
var front = $(".front");
var back = $(".back");
var left = $(".left");
var right = $(".right");
front.removeClass("front").addClass("right");
back.removeClass("back").addClass("left");
right.removeClass("right").addClass("back");
left.removeClass("left").addClass("front");
break;
case arrow.down:
$(".front").css({"transform":bottom});
$(".back").css({"transform":top});
$(".top").css({"transform":front});
$(".bottom").css({"transform":back});
var front = $(".front");
var back = $(".back");
var top = $(".top");
var bottom = $(".bottom");
front.removeClass("front").addClass("bottom");
back.removeClass("back").addClass("top");
top.removeClass("top").addClass("front");
bottom.removeClass("bottom").addClass("back");
break;
}
});
参考材料：
$(".front").css({"transform":left});这行代码是无意义的，因为在第一次执行后，left变成了一个jQuery对象，而不是一个变换字符串！ - Eric