A CSS 3 Tutorial: 2D Special Effects
Goals of This Tutorial: Learn About CSS3 2D Transformations
The two dimensional CSS method to create special effects are known as transformations. They allow you to change size, location, and shape of objects.
The five methods are:
rotate - the element can be change by any number of degrees
scale - which allows you to change the height, width or both height and with of an element
skew - which allows you to skew an element on either the X-coordinate, Y-coordinate or both
translate - which allows you to change the X and Y coordinates of an HTML element
and a matrix method which allow you to combine the rotate, scale, skew and translate methods.
Background of How New Features Are Added to Browsers
To understand the examples which follow one needs to have a little background of how they are introduced in the various browsers available.
For Microsoft Internet Explorer when a new extension becomes availabe its name is preceded by -ms-extension_name. So in the preceding section each of the methods mentioned wouldbe specified as:
-ms-tranform:method_name. For example, the rotate method would be defined as:
-ms-tranform:rotate.
Similarly, Chrome, Firefox, Opera in early versions of their browsers would be specified as -webkit-. -moz-, and -o- respectively and in later versions as -webkit-.
The final version of the name in the unified standard drops the prefix names (i.e. -ms-, -o-,
-moz-, -webkit- are eliminated. This is why the examples which follow have three versions of the method defined.
The rotate() Method
The rotate() method takes one argument, the number of degrees or rotation.The element rotates clockwise at a given positive number of degree. Negative values are allowed and rotates the element counter-clockwise.
Illustration of the rotate() Method Before and After
The translate() Methods
There are three versions of the translate method:
- translateX(n) - a 2D translation, moving the element along the X-axis
- translateY(n) - a 2D translation, moving the element along the Y-axis
- translate(x,y) - a 2D translation, moving the element along both the X-axis and the Y-axis.
The values are specified in pixels. Negative valuse shift to the left and up. Positive to down and the right of the screen.
Illustration of the Translate() Method
The scale() Methods
Again we have three methods defined:
scaleX(n) - a 2D scale transformation, changing the element's width
scaleY(n) - a 2D scale transformation, changing the element's height
scale(x,y) - 2D scale transformation, changing the elements width and height
Values are a multiplication factor. scaleX(3) would increase the size 3 fold. scaleX(0.25) would cause the width to be 1/4 of the original size.
Illustration of the scale() Method
The skew() Methods
Again there are three defined methods:
skewX(angle) - 2D skew transformation along the X-axis
skewY(angle) - 2D skew transformation along the Y-axis
skew(angle-X,angle-Y) - 2D skew transformation along the X- and the Y-axis
Illustration of the skew() Method
The matrix() Method
The matrix() method is the tricky one to try to understand. You can do all of the operations: rotate, translate (move), scale and skew mby manipulating six values.
The default state is represented by transform:matrix(1,0,0,1,0,0); Just remember the "100 rule".
The second and third arguments can be used to skew the element, if used singly. Changing one argument skews the element to the right. Changing only the other argument skews the element to the left.
Using the second and third arguments, one positive and one negative of equal value rotates the element.
The first and fourth arguments scale the element.
Remember that transitions can also be specified in combinations as well (which might be easier than the matrix "shorthand").
The following snapshots show various combinations of the six arguments.
Default transform:matrix(1,0,0,1,0,0)
matrix() Second Argument Skew to the Right
matrix() Third Argument Skews to the Left
matrix() Second and Third Arguments Opposite and Equal
matrix() Fifth and Sixth Arguments Results in a Translation, a move
matrix() First and Fourth Arguments Scale
The transform-origin() Property
By default, the transform property performs its actions around the center of the element be set to the coordinate value (0,0). Transform operations are also order operations. The net result of this is that at times multiple transformations and the order in which they are performed can result in undesirable results. This forms the basis of using the transform-origin property.
What sometimes needs to happen is to set the transform-origin property to be anchored differently, perhaps from the "top left" or "bottom right" point of the element being transformed. In other words, for a rotation, for example, we would spin the image for that new anchor pint and not from the center of the element.
Wrap Up and What's Next
This pretty much takes care of the CSS 3 2D properties. The suggestion would be to work out a number of simple examples. Create a rectangular area (or multiple areas) and work with transformations differing the order in which they are applied.
What's next? It seems like a good idea at this poin to look into CSS 3 three dimensional transformations.
