CSS Transformations

Starting with version 4.3 xml3d.js includes 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
• The camera controller won't work properly 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"></transform>

<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) scale3d(1,2,3) 
  rotate3d(0, 0, 1, -45deg) translate3d(0px, 0px, -5px)" >
  ...
</group>

CSS Transitions

Starting with v5.2 XML3D includes some basic support for CSS transitions on the `transform` property. This can be used to animate transformations purely through CSS. For example, the following CSS smoothly moves the mesh from left to right over a 3 second period:

// Move the mesh 600 units to the right over a 3 second period
<mesh src="myMesh.xml" style="transform: translate3d(600px, 0, 0); transition: transform 3000ms ease;"></mesh>

This is great but keep in mind that transition support is still experimental. Because CSS doesn't include any form of change notification system XML3D is forced to detect transitions and poll the changes manually over the duration of the animation. For now using lots of transitions simultaneously should be avoided, as should changing a transition while it's already running.