javascript - CSS3 Rotate3d 在所需的方向

Question

在this demo来自 W3C 的 rotate3d，第一个示例是将 div 的面旋转到“左上角”。

但是，使用相同的矢量我无法让 div 的面朝“左上角”旋转。我怎样才能获得相同的旋转？

jsfiddle

#r {
    position: absolute;
    top: 100px;
    left: 100px;
    border: 7px dotted;
    width: 200px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
}

#r:hover {
    -webkit-transform: rotate3d(1, -1, 0, 70deg);
    transform: rotate3d(1, -1, 0, 70deg);
}

Answer 1

你所拥有的是正确的。对我来说，W3Schools 第一个演示的转换版本在检查时看起来像这样

黑色轮廓是一些奇怪的扭曲版本，当您查看代码时没有任何意义。蓝色区域表示元素所在的位置(以及它应该的位置)并显示正确的转换

这是我将鼠标悬停在您的元素上时看到的内容

这是相同的转换，只是元素更宽。问题是我们的眼睛可以将这种旋转感知为向左倾斜而不是向右倾斜。

要显示这一点，您可以查看 this example我为另一个问题创建了。通过阴影，您可以很容易地看出 div 正在跟随鼠标光标

现在注释掉 javascript 中的第 15 行和第 16 行以删除阴影并尝试将鼠标从左上角移动到右下角然后再返回。你发现了什么？无论您走到哪里，div 看起来都以相同的方式移动!

我们的眼睛是愚蠢的。向您的元素添加一个小阴影将使我们的眼睛按照您的意愿解释变换。 Updated jsFiddle

box-shadow: 10px 10px 5px #3D352A;

您可以随心所欲地设置阴影的样式，但是添加一个小阴影可以让我们的眼睛更容易准确地跟踪正在发生的事情

附带说明一下，不要使用 W3School，它们有缺陷、过时，而且经常表现得不像他们应该做的那样。不要成为 W3Fool !