SXSW 2013: Fun & Games with CSS3
Chris Ruppel demonstrates some bleeding-edge creative concepts you can achieve using CSS3. Examples aren’t as practical as they are inspiring, showing off the possibilities of CSS3 and touching on components like animation, media queries, masks, transforms, transitions, filters, shaders, and 3D.
The audience should walk away with excitement, new awareness, and the desire to implement some of this awesome eye candy in a practical manner.
We shouldn’t be calling it CSS3, as it is just CSS with modules. One of the modules just happens to be CSS2.1, which encompasses all of the existing styles.
3D Transforms can be a little complex, but what is cool about them is they are inherited by their children just like other CSS properties.
Make sure to do all of your 3D Transforms with ems, as it will change monitor to monitor.
- Translate (moving on x, y, z)
- Rotate (x, y, z)
- perspective: an integer representing distance from camera, measured in px.
- perspective-origin: vanishing point of the perspective effect
- backface-visibility: specifies if you can see this element when it is not facing you. A polygon traditionally in 3D rendering is off by default. However, with CSS3 they have enabled it by default.