CSS3 2D Transforms support in Opera Presto 2.6

W3C reference
CSS3 2D Transforms Module
Opera articles
Showing and hiding content with pure CSS3
CSS3 transitions and 2D transforms
On this page:
Transform properties support
Transform functions support
CSSMatrix interface support

Opera Presto offers partial support for the CSS3 2D Transforms Module. As stated by the W3C, the CSS visual formatting model describes a coordinate system within which each element is positioned. Positions and sizes in this coordinate space can be thought of as being expressed in pixels, starting in the upper left corner of the parent with positive values proceeding to the right and down.

This coordinate space can be modified with the "transform" property. Using transform, elements can be translated, rotated and scaled in two dimensional space. The coordinate space behaves as described in the coordinate system transformations section of the SVG 1.1 specification. This is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards.

For further information, please see the W3C CSS3 2D Transforms Module.

Transform properties support

Opera Presto supports the following CSS3 2D Transform properties. Note that since this CSS3 module is still experimental, -o- is prefixed to each of the properties, enabling the Opera Presto 2.6 rendering engine to identify and use them.

-o-transform property

A two-dimensional transformation is applied to an element through the -o-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.

-o-transform property support data
Property name -o-transform
Value(s) none | <transform-function> [ <transform-function> ]*
Initial none
Applies to Block-level and inline-level elements
Inherited No
Percentages Refer to the size of the element's box
Media Visual
Computed value Same as specified value
Support Yes

-o-transform-origin property

The -o-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.

-o-transform-origin support data
Property name -o-transform-origin
Value(s) [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
Initial 50% 50%
Applies to Block-level and inline-level elements
Inherited No
Percentages Refer to the size of the element's box
Media Visual
Computed value For <length> the absolute value, otherwise a percentage
Support Yes

Transform functions support

Opera supports the following CSS3 2D Transform functions. Note that the Opera -o- prefix is not needed with these functions.

The value of the transform property is a list of <transform-functions> applied in the order provided. The individual transform functions are separated by whitespace. The set of allowed transform functions is given below. In this list the type <translation-value> is defined as a <length> or <percentage> value, and the <angle> type is defined by CSS Values and Units.

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].
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.
rotate(<angle>)
Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the -o-transform-origin property.
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).

CSSMatrix interface support

Attributes

a-f of type float
Attribute names a-f of type float
Description Each of these attributes represents one of the values in the 3x2 matrix.
Support Yes

Methods

setMatrixValue
Method setMatrixValue
Description This method replaces the existing matrix with one computed from parsing the passed string as though it had been assigned to the transform property in a CSS style rule.
Parameters string of type DOMString
- The string to parse.
Return value None
Exceptions DOMException SYNTAX_ERR
- Thrown when the provided string can not be parsed into a CSSMatrix.
Support Yes
multiply
Method multiply
Description The multiply method returns a new CSSMatrix which is the result of this matrix multiplied by the passed matrix, with the passed matrix to the right. This matrix is not modified.
Parameters secondMatrix of type CSSMatrix
- The matrix to multiply.
Return value CSSMatrix
- The result matrix.
Exceptions None
Support Yes
inverse
Method inverse
Description The inverse method returns a new matrix which is the inverse of this matrix. This matrix is not modified.
Parameters None
Return value CSSMatrix
- The inverted matrix.
Exceptions DOMException NOT_SUPPORTED_ERR
- Thrown when the CSSMatrix can not be inverted.
Support Yes
translate
Method translate
Description This method returns a new matrix which is this matrix post multiplied by a translation matrix containing the passed values. This matrix is not modified.
Parameters x of type float
- The X component of the translation value.
y of type float
- The Y component of the translation value.
Return value CSSMatrix
- The result matrix.
Exceptions None
Support Yes
scale
Method scale
Description The scale method returns a new matrix which is this matrix post multiplied by a scale matrix containing the passed values. If the y component is undefined, the x component value is used in its place. This matrix is not modified.
Parameters scaleX of type float
- The X component of the scale value.
scaleY of type float
- The (optional) Y component of the scale value.
Return value CSSMatrix
- The result matrix.
Exceptions None
Support Yes
rotate
Method rotate
Description This method returns a new matrix which is this matrix post multiplied by a rotation matrix. The rotation value is in degrees. This matrix is not modified.
Parameters angle of type float
- The angle of rotation.
Return value CSSMatrix
- The result matrix.
Exceptions None
Support Yes

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.