Question

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

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

#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;

你可以根据自己的喜好设置阴影的样式，但添加一个小阴影可以让我们的眼睛更容易理解正在发生的事情

另一方面，不要使用W3Schools，它们存在缺陷，过时，并且通常不像它们应该的那样行事。不要成为W3Fool！

Answer 2

像Zeaklous指出的那样，我们的眼睛被愚弄了。因此，您必须将perspective属性添加到容器元素。使用此属性，您可以控制3d效果的强度。这是观众对场景的距离。值越低，3D效果就越大。

另一件事：最好为position:relative面部设置一个容器元素，并为该容器提供perspective属性。否则，您需要perspective-origin属性才能使3D效果居中。

Chrome中似乎也存在错误。因此，有时候视角有效，有时则无效。我使用的hack是将透视作为transform: perspective( 400px )添加到子元素。

查看更新后的JSFiddle

请记住：添加前缀-moz和-o以支持Mozilla和Opera。

Answer 3

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

<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>

CSS3 Rotate3d在所需方向

3 个答案:

JSFiddle