3d css
Made for Mobile
ConvergeSE 2013
Hunter Loftis
<hunter@skookum.com>
3D CSS
- Who the Hell Am I?
- The Rise of Mobile
- Why 3D CSS?
- Compatibility
- Animation Demos
- The six 3D Properties
- Painting
who the hell am I?
Hunter Loftis
Director of Technology, Skookum Digital Works
(42-person shop in Charlotte, NC)
We build awesome custom business software.
Looking for a fun job?
I'm a JavaScript junkie,
addicted to graphics and visualization.
The Rise of Mobile
Last year at Skookum: 60% mobile
This year: closer to 90%
'Apps' aren't the only game in town.
Prepare for the future.
Most developers aren't.
why 3d css?
Speed. Quality. User experience.
"Native" feeling.
Not a gimmick.
Not hard. Not complicated.
Do you use 3D CSS transformations?
Do you understand them?
Compatibility
iOS 3.2+
Android 3.0+
Blackberry 7.0+
(all with the -webkit prefix)
Windows Phone 8 - I don't have details, but
it supports this stuff.
Always test on real devices!
(your simulator lies to you)
try it on your (i)phone
(it'll work on some Androids also)
Each demo can be added to your homescreen
as a web app if you'd like:
stage 1
JavaScript Animations
(ala jQuery.animate())
Changes CSS properties with
setInterval() or requestAnimationFrame()
Cutting-edge circa 2006
[demo]
Stage 2
Absolutely positioned CSS transitions
(left: x; top: y;)
Uses CSS transitions to transform elements
instead of JavaScript.
Cutting-edge circa 2008
This is what most developers still use!
[demo]
stage 3
2D CSS Transformations
(transform: translate(x, y))
Treats states and animations as discrete entities.
Allows efficient repainting and reflow.
Cutting-edge circa 2011
[demo]
stage 4
3D CSS Transformations
(translate3d(x, y, z))
Offloads work onto the GPU.
Avoids flicker from reflow on iOS devices.
Fastest, smoothest animation possible today.
Cutting-edge... now!
[demo]
-webkit-perspective
- Affects descendents
- 500 - 1000px = reasonable
- smaller = greater perspective
-webkit-perspective: 1000px;
[demo]
-WEBKIT-PERSPECTIVE-ORIGIN
Sets the 'vanishing point'
Defaults to the center of the container
-webkit-perspective-origin: 50% 150px;
[demo]
-webkit-transform
-
translate3d(x, y, z)
- scale3d(sx, sy, sz)
- rotate3d(x, y, z, angle)
*z cannot be a percentage
-webkit-transform: translate3d(0, -10px, 30px);
[demo]
-webkit-transform-origin
Sets the origin ('center point') of transformation
relative to the original border box.
Defaults to 50% 50%.
-webkit-transform-origin: 10px 25%;
[demo]
-webkit-transform-style
Should elements be flattened (3D 'paint' only?)
Or should they share the same 3D environment?
Affects descendants only.
-webkit-transform-style: preserve-3d;
[demo]
-webkit-backface-visibility
Controls whether or not the back sides
of elements are rendered.
Defaults to 'visible'.
'hidden' can give a performance boost.
-webkit-backface-visibility: hidden;
[demo]
painting a 3d scene
[demo]
Tips
- Speed issues? Perspective: 1000 + visibility: hidden
- Don't load hundreds of elements into the GPU.
- --show-composited-layer-borders (chrome flag)
- --show-paint-rects (chrome flag)
link bait
convergese 3d css
By hunterloftis
convergese 3d css
- 2,046
