Change perpective angle/origin 3d-css on mouse move

Question

I'm trying to get the perspective view-angle with the following, of a cube:

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

But I doesn't do what I expected, I want the actual view-angle to be changed. So when transformOrigin: Xpos+'%'+Ypos+'%' is 100%-100%. I expected the viewing angle to be from the bottom-right corner, and see the right/bottom sides of the cube. But all it seems to do is zoom in on the cube.

I am using jstransit, because setting the .css( perspective-origin: X% X% ) through jQuery doesn't seem to do anything.

I guess I'm not understanding 3d CSS fully yet.

Can anyone see where I'm going wrong?

(Update1: when I edit the first <section>: and set: transform: rotateY(1deg) rotateX(1deg), it seems to do even less. As if the transform had to happen, for the view-angle to change? http://jsfiddle.net/TrySpace/JvFSQ/6/)

(Update2: so, when I set Y&X to 90deg, I get somewhat what I want, although in reverse. Where am I going wrong in my thinking? http://jsfiddle.net/TrySpace/JvFSQ/8/)

Answer 1

The transform-origin does not change view angle. It changes the center of a rotation transform.

The perspective-origin changes how the perspective property calculates the vanishing point. This deals some with "viewpoint."

Now, I don't know exactly what you are trying to achieve (so my "solution" here may not be fully what you want), but I think what will head you in the right direction is setting your code to change this property on the article wrapper that has the perspective property set.

See this fiddle.

It changed the last line of your script to

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

And reset the transform-origin on your section to transform-origin: 50% 50% 0px;. I don't think this is quite what you want yet, but I think the functionality that you desire is closer to what you are expecting.

Answer 2

something like this ?

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