5

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

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

但是我没有做我期望的事情，我希望改变实际的视角。所以什么时候transformOrigin: Xpos+'%'+Ypos+'%'是100%-100%。我希望视角来自右下角，并看到立方体的右侧/底部。但它似乎所做的只是放大立方体。

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

我想我还没有完全理解 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/）

4

2 回答 2

7

transform-origin不改变视角。它改变了rotation变换的中心。

perspective-origin 更改perspective属性计算消失点的方式。这涉及一些“观点”。

现在，我不确切知道您要实现什么（因此我的“解决方案”可能不完全是您想要的），但我认为将引导您朝着正确方向前进的是设置您的代码以更改此属性具有属性集的article包装器。perspective

看到这个小提琴。

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

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

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

于 2013-01-17T15:22:50.087 回答
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 )');
});
于 2016-03-11T08:29:04.427 回答