Question

我最近一直在努力使用3D CSS。

我有一个立方体（按照本教程中的说明制作：http://desandro.github.io/3dtransforms/docs/cube.html）

我试图允许用户垂直或水平旋转90度以显示另一张脸，所以我有两个javascript函数：

document.getElementById('rot-x').addEventListener( 'click', function()
{
  rotX+=90;
  $('#cube').css("transform", 
  "translateZ(-100px) 
  rotateX("+rotX+"deg) 
  rotateY("+rotY+"deg) 
  rotateZ("+rotZ+"deg)");

  console.log("X:" + rotX + "\nY:" + rotY + "\nZ:" + rotZ); 
};

和

document.getElementById('rot-x').addEventListener( 'click', function()
{
  rotY+=90;
  $('#cube').css("transform", 
  "translateZ(-100px) 
  rotateX("+rotX+"deg) 
  rotateY("+rotY+"deg) 
  rotateZ("+rotZ+"deg)");

  console.log("X:" + rotX + "\nY:" + rotY + "\nZ:" + rotZ); 
};

问题是旋转显然是局部的，这意味着轴与物体一起旋转。因此，如果我在X轴上旋转一次而在Y轴上旋转一次，则第二次旋转不会显示另一个面，因为Y轴现在垂直于屏幕。
我真的需要知道如何解决这个问题，或者找到另一种让用户切换立方体面的方法

我需要所有这些行动永远是可能的：

显示当前的面孔
在当前的下方显示面部
在当前的
在当前的

css 3d中的全局旋转

0 个答案: