Search
Clear search
Close search
Google apps
Main menu

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.

Motion paths don't work with top/left positioning.
Change the positioning style

To change the positioning style:

  1. In the toolbar, click the Selection tool.
  2. Click the positioning style option button .
  3. Choose a positioning style from the pop-up menu:
    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.
Change the sizing style

To change the sizing style:

  1. In the toolbar, click the Selection tool.
  2. Click the sizing style option button .
  3. Choose a sizing style from the pop-up menu:
    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.

Transform controls

When the Transform Control checkbox in the tool options bar is checked, the Selection tool lets you change the size and rotation of your selected elements.

To rotate a selection:

  1. In the toolbar, click the Selection tool.
  2. Make sure the Transform Control checkbox is selected in the tool options bar.
  3. Select the object or objects. Rotation controls (two nested rings) will appear in the middle of the selection.
  4. Optionally, change the center of the rotation by dragging the inner ring of the rotation controls.
  5. Rotate the selection by dragging the outer ring of the rotation controls.
  6. Optionally, hold the Shift key while dragging to constrain the rotation to 45° increments.

To resize a selection:

  1. In the toolbar, click the Selection tool.
  2. Make sure the Transform Control checkbox is selected in the tool options bar.
  3. Select the object or objects. Selected elements are surrounded by a blue bounding box.
  4. Drag one of the control points on the sides or corners of the bounding box.
  5. Optionally, hold the Shift key while dragging to maintain the original aspect ratio of the selection.
Was this article helpful?
How can we improve it?