16 comments

  • Donovan HutchinsonDonovan Hutchinson, 4 years ago

    Would love to read how this is done.

    5 points
    • Felix FeierabendFelix Feierabend, 4 years ago

      you can :) http://codepen.io/ge1doot/pen/GgOYoy

      1 point
      • Ed AdamsEd Adams, 4 years ago

        I believe that Donovan was asking for a more detailed teardown or line by line explanation of what's going on there.

        2 points
      • Donovan HutchinsonDonovan Hutchinson, 4 years ago

        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.

        2 points
    • Juha LindstedtJuha Lindstedt, 4 years ago (edited 4 years ago )

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

      ie.

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

      2 points
  • Tom DurkinTom Durkin, 4 years ago

    Love it. Feels like something out of a horror film.

    5 points
  • Luis La TorreLuis La Torre, 4 years ago

    I can't believe its all from one jpeg, the code for this so spotless. Genius!

    4 points
  • Updula LeeUpdula Lee, 4 years ago (edited 4 years ago )

    Apparently Kid

    1 point
  • Nick HileyNick Hiley, 4 years ago

    Works surprisingly well on iOS Safari!

    1 point
  • alec salec s, 4 years ago

    holy shit

    1 point
  • Laurens SpangenbergLaurens Spangenberg, 4 years ago

    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.

    0 points
  • Tyler DeitzTyler Deitz, 4 years ago

    absolutely beautiful

    0 points