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:

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

ScottS · Accepted Answer · 2013-01-17T20:24:37.620

7

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.

edited Jan 17 '13 at 20:24

answered Jan 17 '13 at 15:22

ScottS

71,703
13
126
146

This is the right approach for shifting perspective- it should be noted that there are some other errors in the original jsfiddle, such as "px" values for perspective (should be plain integer to represent the camera trapezoid), and that the body/html/article all need height and width property (% if that's what you're going for) for the % to have meaning. - check out this fiddle: http://jsfiddle.net/gb8Ln/ for webkit reference – chrisgonzalez Jan 17 '13 at 18:04
Scott, You forgot to link the fiddle? – TrySpace Jan 17 '13 at 20:11
Ok, I tried it, it's very close to what I want, but I don't want it to deform like that, I would like to maintain the proportions of the cube, just move around the 'camera'. Well probably the cube itself doesn't deform, but the cube is still in a static position, but I guess I'll have to move it manually with each mouse-move. – TrySpace Jan 17 '13 at 20:24
@TrySpace: Sorry about that. Added the link. – ScottS Jan 17 '13 at 20:24
That's more like it: http://jsfiddle.net/JvFSQ/21/ although it still gets elongated in the z-axis – TrySpace Jan 17 '13 at 23:39
@TrySpace: It seems that setting the `perspective-origin` to a larger setting [helps the elongation issue](http://jsfiddle.net/JvFSQ/29/) but also looses some of the "motion around" the object. – ScottS Jan 19 '13 at 11:14
Thank you very much. Your answer really helped me. – Moaaz Bhnas Dec 20 '18 at 19:34

score 2 · Answer 2 · answered Mar 11 '16 at 08:29

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

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

2 Answers2