Two Dimensional Transforms
CSS3 gives us the transform property, which allows us to easily position, stretch, scale, and rotate elements. Here's a list of the valid values (functions) for the transform property:
2D Transform Methods
||translate(10px, -20px) moves the element 10 pixels left and 20 pixels up from its original position; can use translateX or translateY for horizontal or vertical positioning
||rotate(20deg) rotates the element 20 degrees clockwise; negative values rotate counter-clockwise
||scale(2,3.5) stretches the element to be twice as wide and 3.5 times as tall; can also use scaleX or scaleY to specify horizontal or vertical scaling
||skew(10deg, 20deg) turns the element 10 degrees about the X axis and 20 degrees about the Y axis; can also use skewX or skewY to control X- and Y-axis skew
||matrix(0.75,0.5,-0.5,1.5,20,0) allows us to specify all of the above methods at once according to a square matrix - see the W3C website for more description of using the matrix function (but be sure to dig up a linear algebra textbook for reference!)
Browser support for transforms is catching up; newer versions of desktop and mobile browser support the property well. Vendor prefixes are recommended - we won't show the prefixes when discussing syntax but will use as appropriate in demos and exercises. Internet Explorer supports transform from version 9 (with -ms- prefix) and without the prefix in version 10.
We'll examine each of the various transform methods in the next example.
By default, the origin - the reference point for translations, rotations, scalings, and skewings - is the center of the element. We can change that via the transform-origin property. The property accepts values for the x-axis and y-axis of the origin, respectively, in percentage, absolute length, or keyword forms. Here are some examples:
- transform-origin: 20% 50%
- transform-origin: left top (possible x values are left, center, right; possible y values are top, center, bottom)
- transform-origin: 10px 50px
In our work so far, we have only looked at two-dimensional transforms. CSS3 also gives us the power to transform elements in three dimensions, too, but those transforms are beyond the scope of this course.