5ml User's Guide

CHAPTER 8: Customizing Page Elements
Changing 3D Transformations Properties
The 3D Transformations tab of the Properties pane lets you edit a widget's 3D properties. For a widget to have 3D
properties you must place it within the 3D Stage widget. You can place one or more of the 5mlwidgets within a 3D Stage
widget.
Note: Due to limited CSS 3D support in some browsers, the 3D Transformation properties are available only in Safari
and Chrome browsers.
Changing an Element's Origin Properties
You can change the position of the element's perspective vanishing point by changing the perspective Origin values.
Changing the X perspective Origin value moves the vanishing point along the X axis. A negative value moves it to the left
and a positive number moves it to the right. Changing the Y perspective Origin value moves the vanishing point along the
Y axis. A negative value moves it down and a positive number moves it to the up.
The perspective Origin properties for all elements within a 3D Stage element are based on the 3D Stage's Perspective and
Perspective Origin values. For example, an element within the 3D Stage element uses the 3D Stage's Perspective Origin
value as its starting point for evaluating its own perspective origin. If you keep the element at it default value, 50%, then
it will share the same vanishing point as the 3D Stage element, as shown with rectangle A in Figure 8-1 on page 216.
Figure 8-1: Placing two Rectangle elements within a 3D Stage element.
If you change the element's Origin value, then you will offset its vanishing point from the 3D Stage element's vanishing
point, as shown with rectangle B in Figure 8-2 on page 217.
- 216 -