Javascript CSS3沿所需方向旋转3d

在W3C的rotate3d中，第一个示例是朝“左上角”旋转div的面

但是，使用相同的向量，我无法使div的面旋转到“左上角”。我怎样才能得到相同的旋转

---

你所说的是对的。对我来说，W3Schools第一个演示的转换版本在检查时是这样的

黑色的轮廓是一个奇怪的扭曲版本，当你看代码的时候，它毫无意义。蓝色区域表示元素所在的位置（以及应该所在的位置），并显示正确的变换

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

这是相同的变换，只是有一个更宽的元素。问题是，我们的眼睛可以感觉到这种旋转是向左后倾或向右前倾

为了说明这一点，你可以看看我为另一个问题创建的。使用阴影，您可以很容易地判断div是否跟随鼠标光标

现在注释掉javascript中的第15行和第16行，以移除阴影，然后尝试将鼠标从左上角移动到右下角，然后再移动回来。你发现了什么？看起来不管你去哪，潜水艇都在以同样的方式移动

我们的眼睛很笨。在元素中添加一个小阴影将使我们的眼睛按照您的意愿解释变换

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

---

另一方面，不要使用W3Schools，它们有缺陷，过时了，而且常常表现得与它们应该做的不一样。别傻了

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

黑色的轮廓是一个奇怪的扭曲版本，当你看代码的时候，它毫无意义。蓝色区域表示元素所在的位置（以及应该所在的位置），并显示正确的变换

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

这是相同的变换，只是有一个更宽的元素。问题是，我们的眼睛可以感觉到这种旋转是向左后倾或向右前倾

为了说明这一点，你可以看看我为另一个问题创建的。使用阴影，您可以很容易地判断div是否跟随鼠标光标

现在注释掉javascript中的第15行和第16行，以移除阴影，然后尝试将鼠标从左上角移动到右下角，然后再移动回来。你发现了什么？看起来不管你去哪，潜水艇都在以同样的方式移动

我们的眼睛很笨。在元素中添加一个小阴影将使我们的眼睛按照您的意愿解释变换

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

---

另一方面，不要使用W3Schools，它们有缺陷，过时了，而且常常表现得与它们应该做的不一样。别傻了

制作了四种不同的变体，每种都在一个方向上

<div id="ulb">
ULB<br/>
UPPER LEFT Backwards<br/>
rotate3d(-200,70,0,70deg);
</div>

<div id="urb">
URB<br/>
UPPER RIGHT Backwards<br/>
rotate3d(1,1,0,70deg);
</div>

<div id="llb">
LLB<br/>
LOWER LEFT Backwards<br/>
rotate3d(1,1,0,-70deg);
</div>

<div id="lrb">
LLB<br/>
LOWER RIGHT Backwards<br/>
rotate3d(1,-1,0,70deg);
</div>

ULB

左上角向后

旋转3d（-200,70,0,70度）；
城市城市

右上角向后

旋转3d（1,1,0,70度）；
法学学士
左下向后

旋转3d（1,1,0，-70度）；
法学学士
右下向后

旋转3d（1-1,0,70度）；

---

制造了四种不同的变体，每个都朝一个方向

<div id="ulb">
ULB<br/>
UPPER LEFT Backwards<br/>
rotate3d(-200,70,0,70deg);
</div>

<div id="urb">
URB<br/>
UPPER RIGHT Backwards<br/>
rotate3d(1,1,0,70deg);
</div>

<div id="llb">
LLB<br/>
LOWER LEFT Backwards<br/>
rotate3d(1,1,0,-70deg);
</div>

<div id="lrb">
LLB<br/>
LOWER RIGHT Backwards<br/>
rotate3d(1,-1,0,70deg);
</div>

ULB

左上角向后

旋转3d（-200,70,0,70度）；
城市城市

右上角向后

旋转3d（1,1,0,70度）；
法学学士
左下向后

旋转3d（1,1,0，-70度）；
法学学士
右下向后

旋转3d（1-1,0,70度）；

---

正如扎克卢斯所说，是我们的眼睛被愚弄了。因此，您必须将

透视图
属性添加到container元素中。使用此属性可以控制3d效果的强度。这是观众眼睛到场景的距离。该值越低，3D效果就越多

另一件事：最好为具有
position:relative
的面使用一个container元素，并为该容器提供
perspective
属性。否则需要
透视原点
属性来居中3D效果

chrome中似乎也有一个bug。因此，有时透视图有效，有时无效。我使用的一个技巧是将透视图作为
transform:perspective（400px）
添加到子元素中

查看更新的

记住：添加前缀
-moz
和
-o
，以支持Mozilla和Opera。
就像Zeaklous指出的那样，被愚弄的是我们的眼睛。因此，您必须将
透视图
属性添加到container元素中。使用此属性可以控制3d效果的强度。这是观众眼睛到场景的距离。该值越低，3D效果就越多

另一件事：最好为具有
position:relative
的面使用一个container元素，并为该容器提供
perspective
属性。否则需要
透视原点
属性来居中3D效果

chrome中似乎也有一个bug。因此，有时透视图有效，有时无效。我使用的一个技巧是将透视图作为
transform:perspective（400px）
添加到子元素中

查看更新的

请记住：添加前缀
-moz
和
-o
，以支持Mozilla和Opera。
hmm..该站点出现了一些奇怪的情况。你说得对。这有很大的缺陷。但他说的是第一个例子（
.axes.un
）。所以它应该是旋转3d（1，-1,0,60度）
@redreggae我现在意识到了问题所在，这是我们的眼睛，而不是代码。更新了我的答案查看我的答案以了解为什么眼睛会被愚弄。旁注，W3C与W3C没有关联。该网站发生了一些奇怪的事情。你说得对。这很有缺陷。但他说的是第一个例子（
.a）
<div id="ulb">
ULB<br/>
UPPER LEFT Backwards<br/>
rotate3d(-200,70,0,70deg);
</div>

<div id="urb">
URB<br/>
UPPER RIGHT Backwards<br/>
rotate3d(1,1,0,70deg);
</div>

<div id="llb">
LLB<br/>
LOWER LEFT Backwards<br/>
rotate3d(1,1,0,-70deg);
</div>

<div id="lrb">
LLB<br/>
LOWER RIGHT Backwards<br/>
rotate3d(1,-1,0,70deg);
</div>