我正在研究 3D CSS，但我无法解决这种不一致问题。
绕 Y 轴旋转后，使“正面”面向场景的右脸，“左”脸旋转到位成为场景正面，绕 X 轴或 Z 轴旋转旋转围绕 Z 轴的立方体。为什么会这样？
重现问题:
1.) 运行代码段
2.) 单击 Y 轴 (+)
3.) 再次点击 Y 轴 (+)
4.) 单击任意 X 或 Z 轴按钮
很奇怪吧？或者我只是错过了 3D 变换世界中一些非常简单的东西？
var rotation_degree = { 'X': 0, 'Y': 0, 'Z': 0 };
$(document).on ("click", "button", function (e)
{
var degree = parseInt ($(this).attr ("data-degree"));
var axis = $(this).attr ("data-axis");
// Animate on an unused property
$(".cube").css ("text-indent", rotation_degree[axis]);
$('.cube').animate (
{
textIndent: rotation_degree[axis] + degree
},
{
step: function (now,fx)
{
rotation_degree[axis] = now;
// Center cube in scene
var transform = "translateZ(-125px)";
// Add transform rotations in specific order: X, Y, Z
for (var key in rotation_degree)
{
// Skip loop if the property is from prototype
if (!rotation_degree.hasOwnProperty (key))
continue;
transform += (" rotate" + key + "(" + rotation_degree[key] + "deg)");
}
// console.log (transform);
// console.log ("--------------------------------------------------------------");
$(this).css ('transform', transform);
},
duration: 'slow'
},
'linear'
);
});html, body {
width: 100%;
height: 100%;
}
.scene {
width: 250px;
height: 250px;
perspective: 250px;
background-color: rgb(0,0,0);
}
.cube {
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transform: translateZ(-125px);
text-indent: 0;
}
.face {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(3, 121, 255, 0.5);
color: #FFF;
line-height: 250px;
text-indent: 0;
text-align: center;
}
.front { transform: rotateY(0deg) translateZ(125px); }
.right { transform: rotateY(90deg) translateZ(125px); }
.left { transform: rotateY(-90deg) translateZ(125px); }
.back { transform: rotateY(180deg) translateZ(125px); }
.top { transform: rotateX(90deg) translateZ(125px); }
.bottom { transform: rotateX(-90deg) translateZ(125px); }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
<div class="cube">
<div class="face front">front</div>
<div class="face right">right</div>
<div class="face left">left</div>
<div class="face back">back</div>
<div class="face top">top</div>
<div class="face bottom">bottom</div>
</div>
</div>
<button data-degree="45" data-axis="X">
X-Axis (+)
</button>
<button data-degree="-45" data-axis="X">
X-Axis (-)
</button>
<button data-degree="45" data-axis="Y">
Y-Axis (+)
</button>
<button data-degree="-45" data-axis="Y">
Y-Axis (-)
</button>
<button data-degree="45" data-axis="Z">
Z-Axis (+)
</button>
<button data-degree="-45" data-axis="Z">
Z-Axis (-)
</button>最佳答案
这是使用 3 个轴的 3D 旋转的正常问题，称为 Gimbal_lock
Gimbal lock is the loss of one degree of freedom in a three-dimensional, three-gimbal mechanism that occurs when the axes of two of the three gimbals are driven into a parallel configuration, "locking" the system into rotation in a degenerate two-dimensional space.
解决方案通常要么使用矩阵或四元数进行旋转，要么保留 3 个轴但分解它们并重新组合以避免这些问题。
const rotation_degree = { 'X': 0, 'Y': 0, 'Z': 0 };
const axisIdToAxis = { 'X': [1, 0, 0], 'Y': [0, 1, 0], 'Z': [0, 0, 1] };
const currentMatrix = new DOMMatrix;
$(document).on ("click", "button", function (e)
{
const degree = parseInt ($(this).attr ("data-degree"));
const axis = $(this).attr ("data-axis");
// Animate on an unused property
$(".cube").css ("text-indent", rotation_degree[axis]);
$('.cube').animate (
{
textIndent: rotation_degree[axis] + degree
},
{
step: function (now,fx)
{
rotation_degree[axis] = now;
// Center cube in scene
const transform = `translateZ(-50px) rotate${axis}(${now}deg) ${currentMatrix}`;
$(this).css ('transform', transform);
},
complete: function() {
// apply rotation to currentMatrix
currentMatrix.preMultiplySelf(
new DOMMatrix().rotateAxisAngleSelf(
...axisIdToAxis[axis], degree));
// zero this out since we applied it above
rotation_degree[axis] = 0;
},
duration: 'slow',
queue: true,
},
'linear',
);
});html, body {
width: 100%;
height: 100%;
}
.scene {
width: 100px;
height: 100px;
perspective: 100px;
background-color: rgb(0,0,0);
}
.cube {
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transform: translateZ(-50px);
text-indent: 0;
}
.face {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(3, 121, 255, 0.5);
color: #FFF;
line-height: 100px;
text-indent: 0;
text-align: center;
}
.front { transform: rotateY(0deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
<div class="cube">
<div class="face front">front</div>
<div class="face right">right</div>
<div class="face left">left</div>
<div class="face back">back</div>
<div class="face top">top</div>
<div class="face bottom">bottom</div>
</div>
</div>
<button data-degree="45" data-axis="X">
X-Axis (+)
</button>
<button data-degree="-45" data-axis="X">
X-Axis (-)
</button>
<button data-degree="45" data-axis="Y">
Y-Axis (+)
</button>
<button data-degree="-45" data-axis="Y">
Y-Axis (-)
</button>
<button data-degree="45" data-axis="Z">
Z-Axis (+)
</button>
<button data-degree="-45" data-axis="Z">
Z-Axis (-)
</button>请注意，上面的代码只是我能想到的最简单的更改。如果您在旋转完成之前单击按钮，它不会处理，但我不想重构所有代码来处理该问题。
PS:Chrome 中有一个与此相关的错误。请参阅:https://bugs.chromium.org/p/chromium/issues/detail?id=986110
关于javascript - 3D CSS 立方体 - 奇怪的旋转不一致(已解决 : Gimbal Lock)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57130421/