鼠标移动时更改透视角度/原点3d-css

Question

我正在尝试获得一个立方体的透视视角，如下所示：

http://jsfiddle.net/TrySpace/JvFSQ/5/

但是我没有做我期望的事情，我想要改变实际的视角。因此，当transformOrigin: Xpos+'%'+Ypos+'%'为100%-100%时。我希望视角是从右下角，并看到立方体的右/底边。但它所做的一切似乎都是放大立方体。

我使用jstransit，因为通过jQuery设置.css( perspective-origin: X% X% )似乎没有任何作用。

我想我还没有完全理解3DCSS。

有人能看出我哪里错了吗？

(Update1:当我编辑第一个<section>：和set：transform: rotateY(1deg) rotateX(1deg)时，它似乎做得更少。好像转换必须发生，视角才会改变？http://jsfiddle.net/TrySpace/JvFSQ/6/)

(Update2:所以，当我将Y&X设置为90度时，我得到了我想要的东西，尽管是相反的。我的想法哪里错了？http://jsfiddle.net/TrySpace/JvFSQ/8/)

Answer 1

transform-origin不会更改视角。It changes the center of a rotation transform.

The perspective-origin changes how the perspective property calculates the vanishing point。这涉及到一些“观点”。

现在，我不知道您到底想要实现什么(所以我这里的“解决方案”可能不完全是您想要的)，但我认为正确的方向是在设置了perspective属性的article包装器上设置代码来更改此属性。

See this fiddle.

它将脚本的最后一行更改为

$("article").css({ perspectiveOrigin: Xpos+'% '+Ypos+'%' });

并将section上的transform-origin重置为transform-origin: 50% 50% 0px;。我不认为这是你想要的，但我认为你想要的功能更接近你的期望。

Answer 2

像这样的东西？

$(document).mousemove(function (event) {
    var Xdeg = 0;
    var Ydeg = 0;
    Ydeg = 90- (event.pageX * 90) / ($(document).width() / 2);            
    Xdeg =  -90 + (event.pageY * 90) / ($(document).height()/2);
    $('#DIVName').css('transform', 'translateZ( -200px ) perspective( 600px ) rotateY( ' + Ydeg + 'deg ) rotateX( ' + Xdeg + 'deg )');
});