3D transformation

From PhiWiki
Jump to: navigation, search
Transform.png

With Phi you can create perspective views of all elements. You can skew and rotate them through the x, y and z axis. With e.g. the .rotateToX() you can even create animated items e.g. on a mouse hover using a defined easing curve.

See also: Transformation How-To.

By clicking on the item header you will enter the transformation mode displaying a special toolbar at the bottom. Transform toolbar.png A green line defines the axis for the transformation, the blue point indicates the origin of the transformation - by clicking on the circles you can change the origin point. If you click on the item the rotation axis or shearing positions are changing. Keeping the left mouse button pressed changes the current transformation by moving the mouse.

Skewing

A combination of skewing (shearing) and rotating enables you to create perspective views of your item.

Rotating

Transformation example

You can rotate any widget through its x-, y-, and z-axis. Transformation through the z-axis is an affine rotation clockwise (negative values are counter-clockwise).

Warning: Not all browser versions can display perspective (non-affine transformations) in a 3D space. Phi creates perspective transformations for all image based items on server side (including transformations through the x- and y-axis). For input items rotations through the x-axis and y-axis are ignored if the browser does not support it.

All major recent browser versions are able to display perspective transformations already:

  • IE >= 10
  • Safari >=4
  • Chrome >=4
  • Firefox >=10
  • Opera >=15 (WebKit based)

See also: .rotateX(), .rotateY(), .rotateZ().