With CSS3 came new ways to position and alter elements. Now general layout techniques can be revisited with alternative ways to size, position, and change elements. All of these new techniques are made possible by the transform property.
The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.
The actual syntax for the transform property is quite simple, including the transform property followed by the value. The value specifies the transform type followed by a specific amount inside parentheses.
- 2D Rotate
- 2D Scale
- 2D Translate
- 2D Skew
One evolution with CSS3 was the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML and CSS, without the use of JavaScript or Flash, for years. Now their wish has come true.
With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.
- Transitional Property
- Transitional Properties
- Transition Duration
- Transition Timing
- Transition Delay
- Animation Direction
- Fade in
- Change color
- Grow & Shrink
- Rotate elements
- Square to circle
- 3D shadow
- Swing
- Inset border
