CSS3 2D Transforms
CSS3 allows us to manipulate objects in 2D space by the use of the
tranform property and its functions for 2D transformations.
tranform property specifies certain transformations to be applied to an element. It can combine several transform functions by separating them with whitespace, for example:
transform: scale(2) rotate(180deg) translateX(15px);
translate function moves the element by an offset defined with two values, if only one value is defined, the second one is taken to be zero. Here is a basic example:
transform: translate(30px, 20%);
If an object needs to be translated only on one axis the functions
translateY can be used, they can represent the example above like this:
transform: translateX(30px) translateY(20%);
Which would create an identical result.
scale function resizes the entire element when using one or two unitless numbers, where
scale(1) is no change,
scale(0.5) is half the lenght and width, and
scale(2) is twice the lenght and width. If two numbers are provided the first defines how much the element will be stretched/collapsed horizontally, and the second - vertically. The following example:
transform: scale(3, 0.5);
Will stretch the object to three times its original width and will make it half as wide. This would be the same as declaring:
transform: scaleX(3) scaleY(0.5);
skew function tilts the element by using one or two angle values. If
skewX(45deg) is defined the top and bottom edges of the element will remain horizontal, but the left and right edges will be "leaning" to the left by 45 degrees. If
skewY(30deg) is defined then the left and right edges of the element will remain vertical, but the top and bottom edges will be tilted to the right by 30 degrees.
rotate function rotates the element clockwise by an angle defined with a single value, for example:
Will rotate the entire element by 45 degrees clockwise.
The transform-origin property sets the origin of a transformation (rotation, scale, etc.) of an object in a simple coordinate system. The default origin of each object is its geometric center.
Setting two values for
transform-origin defines the horizontal and vertical position.
If only one value is specified it refers to the horizontal position, the vertical position in this case is assumed to be 'center'. The <percentage> and <length> values here are the offset of the transform origin from the top left corner of the element.
transform-origin property can also receive more than two values:
transform-origin: bottom 25px right 40%
In such cases, the second and the fourth values determines the offset from the edge defined by the keyword preceding it. The transform origin for the example above is 25px from the bottom and 40% from the right edge of the element.
If only three values are given, the fourth missing value - the vertical offset - is assumed to be zero.
translate functions can be used to declare its horizontal and vertical values both together or separately by using
translateY. The function
rotate can have only one value.
CSS transforms are currently supported with prefixes by these browsers:
Internet Explorer 9+
When declaring transforms always write the prefixed declarations first and the non-prefixed standard declaration at the end:
-webkit-transform: <transform functions>; -moz-transform: <transform functions>; -ms-transform: <transform functions>; -o-transform: <transform functions>; transform: <transform functions>;