Transforms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed mattis leo. Nullam lobortis consequat libero ut consectetur. Donec pellentesque vulputate nunc, vitae elementum ipsum feugiat sed. Integer sagittis pretium ipsum, semper bibendum velit vehicula eu. Sed adipiscing, neque ac pulvinar viverra, ipsum mauris sagittis mi, eget ultrices diam erat ac enim. Pellentesque elit lacus, interdum eget tempor eget, dapibus nec sem. Fusce tristique, enim quis volutpat semper, nibh nisi imperdiet nisl, vitae placerat enim dui a enim. Fusce sit amet augue lectus, vel cursus velit.

Transform Functions

matrix(<number>, <number>, <number>, <number>, <number>, <number>)

Specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].

 

rotate(<angle>)

Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.

 

translate(<translation-value>[, <translation-value>])

Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.

translateX(<translation-value>)

Specifies a translation by the given amount in the X direction.

translateY(<translation-value>)

Specifies a translation by the given amount in the Y direction.

 

scale(<number>[, <number>])

Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.

scaleX(<number>)

Specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.

scaleY(<number>)

Specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

 

skewX(<angle>)

Specifies a skew transformation along the X axis by the given angle.

skewY(<angle>)

Specifies a skew transformation along the Y axis by the given angle.

skew(<angle> [, <angle>])

Specifies a skew transformation along the X and Y axes. The first angle parameter Specifies the skew on the X axis. The second angle parameter Specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis).

 

Transform

A two-dimensional transformation is applied to an element through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for an element is obtained by performing a matrix concatenation of each entry in the list. The set of transform functions is similar to those allowed by SVG.

-moz-transform:  matrix(a, c, b, d, tx, ty)
-moz-transform:  rotate(angle)
-moz-transform:  translate(tx[, ty])
-moz-transform:  translateX(tx)
-moz-transform:  translateY(ty)
-moz-transform:  scale(sx[, sy])
-moz-transform:  scaleX(sx)
-moz-transform:  scaleY(sy)
-moz-transform:  skew(ax[, ay])
-moz-transform:  skewX(angle)
-moz-transform:  skewY(angle)

transform: matrix(a, c, b, d, tx, ty) where a, b, c, d build the transformation matrix and tx, ty are the translate values.

a is the scale X, b is the skewY, c is the skewX, d is the scaleY, tx is the xposition, and ty is the yposition.

{-moz-transform:matrix(1, -0.2, 0, 5, -25px, -30px);
-moz-transform-origin:center center;}

{-webkit-transform:matrix(1, -0.2, 0, 5, -25, -30);
-webkit-transform-origin:center center}

Transform Origin

The ‘transform-origin’ property establishes the origin of transformation for an element. This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value. This effectively moves the desired transformation origin of the element to (0,0) in the local coordinate system, then applies the element's transform, then moves the element back to its original position.

If only one value is specified, the second value is assumed to be ‘center’. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative <percentage> and <length> values are allowed.

-moz-transform-origin:  [ <percentage> | <length> | left | center | right ]
-moz-transform-origin:  [ <percentage> | <length> | top | center | bottom ] ?

<percentage>

With a value pair of 0% 0%, (or just 0 0) the transform-origin is the upper left corner of the box. A value pair of 100% 100% places the transform-origin to the lower right corner. With a value pair of 14% 84%, the point 14% across and 84% down the box is the transform-origin.

<length>

With a value pair of e.g. 2cm 1cm, the transform-origin is placed 2cm to the right and 1cm below the upper left corner of the element.

top left | left top

Same as 0 0

top | top center | center top

Same as 50% 0

right top | top right

Same as 100% 0

left | left center | center left

Same as 0 50%

center | center center

Same as 50% 50% (default value)

right | right center | center right

Same as 100% 50%

bottom left | left bottom

Same as 0 100%

bottom | bottom center | center bottom

Same as 50% 100%

bottom right | right bottom

Same as 100% 100%

{-moz-transform-origin:center}
{-webkit-transform-origin:center}

This is a title

Nam non augue quis augue convallis adipiscing. Integer id velit nunc. Fusce auctor luctus sollicitudin. Suspendisse et arcu metus. Sed hendrerit, neque vitae posuere lacinia, risus ipsum semper neque, et volutpat urna purus aliquet lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dignissim sagittis tellus sed hendrerit. Praesent porta fringilla nisi iaculis aliquet.