Question

我正在尝试使用以下多维数据集获取透视视角：

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

但我不按预期行事，我希望改变实际的视角。所以当transformOrigin: Xpos+'%'+Ypos+'%'为100％-100％时。我期望视角来自右下角，并看到立方体的右/底侧。但它似乎只是放大立方体。

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

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

谁能看到我出错的地方？

（Update1：当我编辑第一个<section>时：并设置：transform: rotateY(1deg) rotateX(1deg)，它似乎做得更少。好像转换必须发生，视角更改？{ {3}}）

（Update2：所以，当我将Y＆amp; X设置为90deg时，我会得到一些我想要的东西，尽管反过来。我的思维在哪里出错？http://jsfiddle.net/TrySpace/JvFSQ/6/）

Answer 1

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

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

现在，我不确切地知道你想要实现什么（所以我的“解决方案”在这里可能不完全是你想要的），但我认为让你朝着正确方向前进的是设置你的代码来改变article包装器上具有perspective属性设置的此属性。

See this fiddle.

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

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

并将transform-origin上的section重置为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 )');
});

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

2 个答案: