-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
3D transformations introduce a big leap-forward in designing websites. We can now experiment with moving and animating elements such as div, img, or even video in a 3D space that benefits from GPU acceleration (for most browsers). The first thing we have to deal with once we decide to introduce 3D effects is the perspective.
The value we set for the
perspective property specifies to the browser how to render elements with a position on the z axis equal to 0 (or not set). For example, perspective:300px means that an element with z = 0 (or not set) is drawn as if it is 300 px away from the viewport. This, of course, affects the way the elements are rendered when rotated.
Next comes a useful property whose purpose is to tell the browser to apply 3D transformations. This property is called
transform-style and its value can either be flat or preserve-3d. When the value is flat, the elements with transformations that affect rotation on the x or y axis do not have perspective...
Change the font size
Change margin width
Change background colour