CSS Transformations

Starting with version m4.3, xml3d.js adds first experimental support for CSS transformations.

CSS transformations currently have following limitations:

• CSS transformations can only be assigned via the style attribute, global css assignments are not supported
• CSS transformations can only be assigned to <group> nodes
• The camera controller won't work on nodes that use css transformations
• CSS transformations are only parsed from the 'transform' property without any browser prefix (e.g. '-mox-transform')
• When defining translations, make sure to use appropriate units. The default unit is px

A complete list of css transfom function

Example

Old transform style:

<transform id="xfm" rotation="0 0 1 0.5" scale="1 2 3" 
  translation="4 5 6" center="0 0 5" scaleOrientation="0 0 1 0.785398163" />

<group transform="#xfm" >
   ...
</group>

Equivalent with css transforms:

<group style="transform: translate3d(4px, 5px, 6px) translate3d(0px, 0px, 5px) 
  rotate3d(0, 0, 1, 0.5rad) rotate3d(0, 0, 1, 45deg) scale(1,2,3) 
  rotate3d(0, 0, 1, -45deg) translate3d(0px, 0px, -5px)" >
  ...
</group>