当鼠标移动时，改变3D CSS的视角角度/原点

Question

我正在尝试使用以下内容获取立方体的透视视角：

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

但是它并没有按照我的预期工作，我希望实际的视角发生改变。因此，当transformOrigin: Xpos+'%'+Ypos+'%'为100%-100%时，我希望视角从右下角开始，并看到立方体的右侧/底部。但是似乎它只是在放大立方体。

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

我想我还没有完全理解3D CSS。

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

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

更新2：当我将Y&X设置为90度时，我得到了我想要的东西，尽管是相反的。我的思路错在哪里？http://jsfiddle.net/TrySpace/JvFSQ/8/

- TrySpace

Answer 1

transform-origin属性不会改变视角，它是用来改变rotation转换的中心点。点击此处查看更多信息。 perspective-origin属性可以改变perspective属性计算消失点的位置，这与"viewpoint"有关。

现在，我不确定您想要实现什么（所以我的“解决方案”可能并不完全符合您的要求），但我认为将代码设置为更改具有perspective属性的article包装器上的此属性将帮助您朝着正确的方向前进。 请参见此代码片段。 它将您的脚本的最后一行更改为：

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

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

- ScottS

---

好的，我已经试过了，它非常接近我想要的效果，但是我不希望它像那样变形，我希望保持立方体的比例，只是移动“相机”。也许立方体本身并没有变形，但是它仍然处于静态位置，但我想我必须手动移动它以响应每个鼠标移动。 - TrySpace

@TrySpace：抱歉，我加上了链接。 - ScottS

这更像是：http://jsfiddle.net/JvFSQ/21/，尽管它仍然在z轴上被拉伸。 - TrySpace

@TrySpace：似乎将perspective-origin设置为更大的值可以帮助解决拉伸问题（http://jsfiddle.net/JvFSQ/29/），但同时也会失去一些物体周围的“运动感”。 - ScottS

非常感谢您。您的回答真的帮了我很多。 - Moaaz Bhnas

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 )');
});

- Ch'nycos