Webkit 3D CSS. Rotate camera like in a First Person Shooter

Question

What I want to achieve is a camera rotation like http://www.keithclark.co.uk/labs/3dcss/demo/ . It's not perfect and sometimes the camera breaks, but that's the idea.

I like the rotation to be similar like a human view, but I only managed to obtain a rotation across a certain point. This is an example of what I obtained http://jsfiddle.net/gaAXk/3/.

As i said before, i would like a human like behaviour.

I also tried with -webkit-transform-origin but with no better result.

Any help/suggestion will be highly appreciated.

Answer 1

The problem here is the following:

To give a human-like behavior, when the point of view moves, you should calculate the new positions on the x/y/z axis for the objects (not just the rotation angle in case of a rotation, for instance).

CSS transform should work in the follwing way, we give a perspective, for example of 800px to a scene. Then the objects will be visible with a Z position up to 800px, if the Z position is, for example 1000px, it will be behind our point of view, so we won't be able to see the element.

That said, after a rotation you should calculate the new position for the items based on our new point of view.

To be clearer I've updated your example with much simpler code (it only supports rotation and there's just one image): http://jsfiddle.net/gaAXk/12/

• The perspective in the example is 800px.
• The image is initially placed at x=0px, y=0px, z=0px. So it will be visible in front of us at a "distance" of 800px.
• When we rotate the point of view, the element should move along a circumference around the point of view, so the x,z positions and the rotation angle of the element, needs to be updated.

The element in the example moves along a circumference with 800px radius (the calculatePos() function does the trick).

The same calculation should be updated if we change position (if the point of view gets closer to some objects, and further from others).

This isn't so trivial. If anyone has better solutions (I'm not a 3D expert), I will be glad to hear some.