3D

ALL OF THE

THINGS

Hi, my name is

Thomas Reynolds




@middlemanapp

Instrument


@instrument

Google Map Dive


Google Zeitgeist


Let's Talk About 3D

Not WebGL

3D CSS

What does that mean?

  • Written in CSS (duh)
  • Works with CSS
  • Interactions (:hover) still work
  • Content still interactive (forms, etc)

Mobile Transitions

  • Lots of transitions (page-to-page)
  • Users expect a little flair
  • The lack of transitions scream "I'm just a web app"

The Plan

  • 3D Coordinates
  • 3D CSS Transforms
  • Popular Transitions
  • Future of 3D

Basics of 3D

The Axis

Translation


#element {
  transform: translateX(100%) translateY(10px); }

  • The 3D (XYZ) Position of the element
  • -X is left, +X is right
  • -Y is up, +Y is down
  • -Z is away, +Z is towards
  • Given in units of px (pixels) or % (percentage)

Rotation

#element {
  transform: rotateX(360deg) rotateZ(-720deg);

  • Rotates AROUND the given axis
  • Given in units of deg (degrees) or rad (radians)

Perspective


#container {  
  perspective: 800px; }

  • Describes the distance from the "camera" to the elements 
  • Required for browsers to start rendering in 3D
  • Must be set on a parent element of the items being transformed
  • Smaller numbers equal more exaggerated transforms
  • Magic numbers that look good are between:  400-2000px

Demo

Modern Browser Support



Including:

  • Mobile Safari
  • Chrome for Android & iOS

* IE10 does not support preserve-3d :(

preserve-3d


#parent {
  transform-style: preserve-3d;

  • Defaults to "flat"
  • "preserve-3d" nests transforms
  • Not available in IE10


3D Transitions

Receding Layers



Card Flip

Carousels


The Near Future

Warning: May Include Javascript & C

Google Zeitgeist

  • Written in Three.js (using the CSS3DRenderer)
  • Renders to CSS

Google Map Dive

  • Written in Three.js
  • Renders to both CSS & WebGL at the same time!
  • Uses a real, HTML/JS/CSS Google Map

CSS Custom Filters

  • Written in a C-like language called GLSL
  • Runs directly on the Graphics Card
  • Chrome-only (behind a flag)


Thank You

http://slid.es/tdreyno/cssconf-3d-all-of-the-things
https://github.com/tdreyno/cssconf-3d-demos

3D All of the Things

By tdreyno

3D All of the Things

CSSConf 2013 Presentation

  • 2,176
Loading comments...

More from tdreyno