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

【问题标题】：Change perpective angle/origin 3d-css on mouse move在鼠标移动时更改透视角度/原点 3d-css
【发布时间】：2012-12-25 23:35:15
【问题描述】：

我正在尝试使用以下立方体获得透视视角：

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

【问题讨论】：

标签： css 3d transform perspective

【解决方案1】：

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

perspective-originchanges 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;。我认为这还不是您想要的，但我认为您想要的功能更接近您的期望。

【讨论】：

这是转移视角的正确方法——需要注意的是原始jsfiddle中还有一些其他错误，例如透视的“px”值（应该是纯整数来表示相机梯形)，并且 body/html/article 都需要 height 和 width 属性（如果您要这样做，则为 % ）才能使 % 有意义。 - 看看这个小提琴：jsfiddle.net/gb8Ln 供 webkit 参考
Scott，你忘了链接小提琴吗？
好吧，我试了一下，和我想要的很接近，但是我不想让它那样变形，我想保持立方体的比例，就在'左右移动相机'。好吧，立方体本身可能不会变形，但立方体仍处于静态位置，但我想我必须在每次鼠标移动时手动移动它。
@TrySpace：很抱歉。添加链接。
这更像是：jsfiddle.net/JvFSQ/21 虽然它仍然在 z 轴上被拉长

【解决方案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 )');
});

【讨论】：