Options for moving and resizing an element

Changing an element's position and size can be accomplished in two main ways using HTML5. The first way is to use the top and left coordinates of the element to specify position, and the element's width and height to specify size. The second way involves using the CSS transform property to translate and scale elements.

Google Web Designer uses both. For element layout, Google Web Designer uses top and left values to position elements, and width and height values to set size. Because the CSS transform property provides a higher frame rate and smoother animation, Google Web Designer defaults to this method when creating CSS-based animation.

When you use the default settings for the transform tools, they will work correctly for both layout and animation. You can change the method used to scale and position an element if you wish, however.

Positioning method

To change the positioning method:

1. In the toolbar, click the Selection  tool.
2. Click the positioning method  button.
3. Choose a positioning method from the pop-up menu:

   Icon	Positioning style	Description
   	Use default positioning	Prefer top/left positioning for layout, and transform:translate3d() when animating position.
   	Use top/left positioning	Use top/left values when positioning an element in a keyframe.
   	Use 3D translation	Use transform:translate3d() values when positioning an element in a keyframe.

Sizing method

To change the sizing method:

1. In the toolbar, click the Selection  tool.
2. Click the sizing method  button.
3. Choose a sizing method from the pop-up menu:

   Icon	Sizing style	Description
   	Use default sizing	Prefer width and height sizing for layout, and transform:scale3d() when animating size.
   	Use width and height	Use width/height values when sizing an element in a keyframe.
   	Use 3D scaling	Use transform:scale3d() values when scaling an element in a keyframe.

Move and resize elements

The positioning and sizing methods you selected will be used when you move or resize elements with the Selection tool.