Hi, my name is
Thomas Reynolds
@middlemanapp
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
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
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
The Near Future
Warning: May Include Javascript & C
- Written in Three.js (using the CSS3DRenderer)
- Renders to CSS
- 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