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.
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 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.
| 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.
| 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 |
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>)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>])[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>)X direction.translateY(<translation-value>)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>)-o-transform-origin property.skewX(<angle>)skewY(<angle>)skew(<angle> [, <angle>])Need help? Hit F1 anytime while using Opera to access our online help files, or go here.