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,847