DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Parallaxed 3D in CSS3

Parallaxed 3D in CSS3

John Esposito user avatar by
John Esposito
·
Jan. 19, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
5.64K Views

Join the DZone community and get the full member experience.

Join For Free

We know that HTML5 Canvas with smart JavaScript can do lots that Flash with ActionScript can do. This is exciting, because it replaces a proprietary technology with JavaScript: it represents another step in the direction of browser-as-platform.

But this means the browser isn't doing much, except interpreting JavaScript. (Okay, that's a lot, but think of it like any other platform: you don't credit Windows with most of its apps.)

CSS3, on the other hand, leaves a lot more wiggle-room for browser implementation -- especially in its more experimental features like 3D transforms.

So CSS3 performance depends, not only on JavaScript interpreter speed (in which IE9 is best), but also on how the browser implements the spec (in which IE9 is still a bit quirky).

As a result, this website (by Steven Wittens) looks cool, but not terribly awesome in any non-Webkit browser:


But open it in a Webkit browser (Chrome or Safari), and start scrolling down.

Real space opens up to two simulated eyeballs -- thanks to the browser, to CSS3, and not to a full JavaScript 3D engine like Three.js.

You may ask: why not use WebGL for in-browser interactive 3D? You may already know the answer, but as Steven explains:

There's WebGL in Chrome and Firefox that can be used to do similar things, but WebGL is its own sandbox: you can't put DOM elements in there, or use native interaction. And any amount of WebGL rendering in response to e.g. scrolling is going to involve some amount of lag.


In other words, CSS3 is tigher-knit with the rest of the page. 

You can see this in Steven's impressively original stylesheet (unminify here), which is grounded in the preserve-3d transform-style (which you'll notice has an important  question still open in the spec) and includes such careful use of the perspective property as this:

html.js div.perspective {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective-origin: 50% 0;
    -webkit-perspective: 800px;
    -moz-perspective-origin: 50% 0;
    -moz-perspective: 800px;
    -o-perspective-origin: 50% 0;
    -o-perspective: 800px;
    -ms-perspective-origin: 50% 0;
    -ms-perspective: 800px;
}

(Okay, that's not the most exciting CSS in itself. But the perspective-origin will become more interesting when you browse the rest of the code.)

Steven even wrote a 'how I did it' with the informative title 'Making Love to Webkit', especially useful if you're interested in both coding and design.

So demo the site, read about Steven's Webkit love, and check out the CSS (unminified) to see how far CSS3 transforms can transport you into real space.

CSS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How To Use Open Source Cadence for Polling
  • Model Quantization for Edge AI
  • Top 5 Programming Languages in AI: A Comparison
  • Practice on Pushing Messages to Devices of Different Manufacturers

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo