Opera 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.
Opera 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.4 rendering engine to identify and use them.
otransform
property
A twodimensional transformation is applied to an element through the otransform
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.
Property name 
otransform


Value(s) 
none  <transformfunction> [ <transformfunction> ]*

Initial 
none

Applies to  Blocklevel and inlinelevel elements 
Inherited  No 
Percentages  Refer to the size of the element's box 
Media  Visual 
Computed value  Same as specified value 
Support  Yes 
otransformorigin
property
The otransformorigin
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.
Property name 
otransformorigin


Value(s) 
[ [ <percentage>  <length>  left  center  right ] [ <percentage>  <length>  top  center
 bottom ]? ]  [ [ left  center  right ]  [ top  center  bottom ] ]

Initial 
50% 50%

Applies to  Blocklevel and inlinelevel 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 
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 <transformfunctions>
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 <translationvalue>
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>)
matrix(a,b,c,d,e,f)
is equivalent to applying the transformation matrix
[a b c d e f]
.translate(<translationvalue>[, <translationvalue>])
[tx,
ty]
, where tx
is the first translationvalue parameter and ty
is the optional second
translationvalue parameter. If <ty>
is not provided, ty
has zero as a value.translateX(<translationvalue>)
X
direction.translateY(<translationvalue>)
Y
direction.scale(<number>[, <number>])
[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>)
[sx,1]
scaling vector, where sx
is given as the parameter.scaleY(<number>)
[1,sy]
scaling vector, where sy
is given as the parameter.rotate(<angle>)
otransformorigin
property.skewX(<angle>)
skewY(<angle>)
skew(<angle> [, <angle>])
Attribute names 
af of type float


Description  Each of these attributes represents one of the values in the 3x2 matrix. 
Support  Yes 
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 
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 
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 
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 
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 
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 
Need help? Hit F1 anytime while using Opera to access our online help files, or go here.