Guillermo Rodas
Google Developer Expert in Web Technologies, Community Organizer, and Online Teacher.
Intro to CSS 3D
Medellin, January 28, 2016
@glrodasz
Cartesian Coordinate System
https://en.wikipedia.org/wiki/Cartesian_coordinate_system
X
Y
X
Y
Z
Perspective
https://en.wikipedia.org/wiki/Perspective_(graphical)
1 Point
2 Points
3 Points
Perspective demo
- Try it into Codepen http://codepen.io/Garethderioth/pen/qbYxMO?editors=1100#0
- https://desandro.github.io/3dtransforms/examples/perspective-03.html
Creating a Cube
https://desandro.github.io/3dtransforms/examples/cube-01-steps.html
https://desandro.github.io/3dtransforms/docs/cube.html
Animation demo
Resources
- https://desandro.github.io/3dtransforms/
- http://caniuse.com/#feat=transforms3d
- http://thewebrocks.com/demos/3D-css-tester/
- http://keithclark.co.uk/labs/css-fps/
- http://tridiv.com/
Intro to CSS 3D
By Guillermo Rodas
Intro to CSS 3D
Intro to CSS 3D for a series of FE talks
