Creating Transform Effects

Outputs Supported

In CSS, the transform property is used to create a 2D or 3D transformation effect. When working with the transform property in the Stylesheet Editor, you can open a popup containing additional fields that let you choose various transform functions. This makes it easier to create the kind of transform you want.

How to Create a Transform Effect

1. From the Content Explorer, open the stylesheet that you want to modify.

2. From the Medium drop-down in the Stylesheet Editor, make sure the proper medium is selected before you begin. In the Advanced view, you can open multiple mediums at once; you just need to look at the title at the top of the medium pane and make sure you are working in the correct one. If you are not using stylesheet mediums for your different outputs or if you want all mediums to have the same settings, just leave the medium set to default and continue.

   Mediums can be used if you want to use one group of settings for online output types and another group of settings for print-based output types. For example, you might use the default medium for your online outputs and the print medium for your print outputs. See Mediums and Media Queries.

   Please note that Flare remembers the last medium that you used when working in the stylesheet, so it may or may not be the one that you want to use the next time around.

   

3. In the local toolbar, make sure the first button displays . If the button displays instead, then click it.
4. In the upper-left corner of the Stylesheet Editor, click in the drop-down field and select .
5. Select the paragraph style for which you want to create the transform effect.
6. From the Show drop-down list on the upper-right side of the editor, select .
7. (Optional) You can use the toggle button in the local toolbar to show properties below in a group view or an alphabetical view .
8. If you are using the grouped view, expand the Positioning group.

9. To the right of transform, click . A popup opens.

   

10. From the Add drop-down, select the function(s) you want to add to your transform effect.

    

    When you add a function, a new field is added to the popup.

    

    Note For details about what each function does, see:

    Copy

    http://www.w3schools.com/cssref/css3_pr_transform.asp

11. Enter a value for the function. Whatever you enter is automatically added to the main transform field.

    

12. (Optional) Continue adding functions and setting values until you have added all of the functions you want in your transform effect. In this way, you can mix and match functions to create a wide variety of effects on the selected style.

    

13. (Optional) If you want to remove a function from the transform field, simply click the x in the box next to that function.

    

14. Click to save your work.