javascript - CSS3 Rotate3d沿所需方向

在W3C的rotate3d的this demo中，第一个例子是将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);
}

最佳答案

正如扎克勒斯所说，是我们的眼睛被愚弄了。所以必须将perspective属性添加到container元素中。使用此属性可以控制三维效果的强度。这是观众的眼睛到现场的距离。值越低，将有更多的三维效果。
另一件事：对于position:relative的面最好有一个container元素，并赋予该容器perspective属性。否则您需要perspective-origin属性才能使3D效果居中。
chrome似乎也有缺陷。所以，有时候这种观点管用，有时候不管用。我使用的一个技巧是将透视图作为transform: perspective( 400px )添加到子元素中。
查看更新的JSFiddle
记住：添加前缀-moz和-o来支持Mozilla和Opera。