Build 3D Graphics from Raw CSS

It's pretty incredible what you can create with raw CSS and nothing else. We've seen sites that feature 3D renders built entirely with CSS scripts, and we've also seen interactive elements that cleverly mimic 3D graphics using carefully worded commands that successfully produce specular, shading and parallax effects. This is especially amazing for those of us - myself included - who originally thought of CSS as nothing more than a fancy way of telling web pages to make a red border around a white text box with some grading here and a little tabulation there.

No, it gets even better. Today, we're focusing on a website that I personally can't explain with my limited experience, but it's an impressive feat on mobile and stationary computing platforms nonetheless. If you check out this recent venture at thismanslife.co.uk, you'll find that one clever developer has figured out how to create a very 3D-like effect on repeating images of an iMac as you scroll down the page. It's not unheard of, but it's certainly laudable for its convincing aesthetic.

Now, as you find yourself caught up in the mesmerizing result, you might also find yourself understanding rather quickly what was done to create this parallax illusion, and it rests in one major flaw: the top facing of the iMac screens. As expected, it appears that the image was scripted to expand and contract depending on the viewer's position in the browser window, and this is done with little discrimination; as such, the top edges of the display panels are doing the opposite of what they should. That is, they're flattening as you scroll back up.

You'll also notice that the display stand doesn't appear to shift at all. This seems to be a flat graphic that shifts accordingly, no parallax or other trickery involved. The simplicity is laudable, and getting GIF images to play smoothly inside the iMac panels is a bonus. However, as CSS developers have pointed out, these types of effects sometimes cause chopping in the scroll effect thanks to certain browsers not executing the CSS the way it was intended. That said, I'd like to see more effects like this going forward, and it's always great to see what new material developers are coming up with every day.