Chris Bateman

Head-Coupled 3D Transforms

Yeah, you read that right. Okay, so this is a little crazy, but I really wanted to try it. If you don’t know what head-coupled perspective is, here’s a realistic example.

I built a simple scene with CSS 3D transforms, and then all we have to do is animate the perspective-origin based on the position of your eyeballs. I didn’t have to do any face-tracking work thanks to the CCV library.

Check it out here!

The face tracking will work best if the scene is well lit with a simple background, and you’ll need to keep your head vertical (and by the way, the face-tracking library is a major memory hog – it seems to be garbage collecting upwards of 15MB every frame – yeesh). And of course it will only work in Chrome until Firefox implements webcam access.

Silly, maybe, but it was definitely fun to try. If you’re interested, I also found an iOS app that does the same thing much better.

See my Experiment on

Tell me what you think: @batemanchris