Would love to read how this is done.
you can :) http://codepen.io/ge1doot/pen/GgOYoy
I believe that Donovan was asking for a more detailed teardown or line by line explanation of what's going on there.
Fair enough :)
I see it's using one image, with transparency and placing copies of that image in 3d. Might be nice to read a walkthrough on building something like it, particularly the planning and then how the JS is set up. But then I'm lazy.
There seems to be a global transform going on for every element:
var globalRotation = "perspective(" + perp.value + "px) rotateX(" + rotation.x + "deg) " + "rotateY(" + rotation.y + "deg) translateX("+(rotation.tx + rotation.ttx)+"px) translateY("+rotation.tty+"px) translateZ("+(rotation.tz + rotation.ttz)+"px)";
..plus local transform, which are defined in HTML (data-transform -attribute):
<img src="http://www.dhteumeuleu.com/images/002_3000x2844n.png" data-transform="rotateY(-90deg) translateZ(-500px)">
And this is where the magic happens:
var s = globalRotation + localTransform[i]; elem.style.transform = s; elem.style.webkitTransform = s;
..rest is just mathematics and transparent PNG's (rooms seem to form a plus) :)
Here the nicely formatted source code.
Love it. Feels like something out of a horror film.
Reminds me of the Silent Hill games.
I can't believe its all from one jpeg, the code for this so spotless. Genius!
Seriously - beautiful code.
Hat off to the author.
Works surprisingly well on iOS Safari!
There's a minor graphics bug when going real close to the wall which make it invisible and results in the whole scene (with the angel) showing. That (bug) reminds me of the angels in Doctor Who for some reason.