用于移动元素和调整元素大小的选项

使用 HTML5 更改元素位置和大小的方式主要有两种。第一种是使用元素的顶部和左侧坐标指定位置，并使用元素的宽度和高度指定大小。第二种是使用 CSS transform 属性平移和缩放元素。

在 Google Web Designer 中，这两种方式都会用到。创建元素布局时，Google Web Designer 会使用顶部值和左侧值定位元素，并使用宽度值和高度值设置大小。由于使用 CSS transform 属性能够提高动画的帧速率和流畅度，因此在创建基于 CSS 的动画时，Google Web Designer 会默认使用这种方式。

当您使用转换工具的默认设置时，这些设置会同时应用于布局和动画。不过，您可以根据需要改用其他方式来缩放和定位元素。

限制

• 动画路径无法使用顶部/左侧位置进行定位。
• AMPHTML 广告中的动画无法使用顶部/左侧位置进行定位，也无法使用宽度值/高度值来设置大小。

更改位置样式

要想更改位置样式，请执行以下操作：

1. 在工具栏中，点击“选择工具”。
2. 点击“位置样式选项”按钮 。
3. 从弹出式菜单中选择所需的位置样式：

   位置样式	说明
   使用默认位置	创建布局时使用顶部值/左侧值进行定位，制作位移动画时使用 transform:translate3d()。
   使用顶部/左侧位置	设置元素在关键帧中的位置时，使用顶部值/左侧值。
   使用 3D 平移	设置元素在关键帧中的位置时，使用 transform:translate3d() 值。

更改大小样式

要想更改大小样式，请执行以下操作：

1. 在工具栏中，点击“选择工具”。
2. 点击“大小样式选项”按钮 。
3. 从弹出式菜单中选择所需的大小样式：

   大小样式	说明
   使用默认尺寸	创建布局时，使用宽度值和高度值来设置大小；制作尺寸缩放动画时，使用 transform:scale3d() 值。
   使用宽度和高度	设置元素在关键帧中的大小时，使用宽度值/高度值。
   使用 3D 缩放	设置元素在关键帧中的大小时，使用 transform:scale3d() 值。

转换控件

如果您选中了工具选项栏中的转换控件复选框 ，则可以使用“选择工具” 来调整所选元素的大小和旋转方式。

要旋转所选对象，请执行以下操作：

1. 在工具栏中，点击“选择工具”。
2. 确保工具选项栏中的转换控件复选框处于选中状态。
3. 选择一个或多个对象。旋转控件（两个嵌套环）会显示在所选范围的中心位置。
4. （可选）通过拖动旋转控件的内环，更改旋转中心。
5. 通过拖动旋转控件的外环，旋转所选对象。
   • 按住 Shift 键并拖动，可将旋转角度增量限制为 45°。

要调整所选对象的大小，请执行以下操作：

1. 在工具栏中，点击“选择工具”。
2. 确保工具选项栏中的转换控件复选框处于选中状态。
3. 选择一个或多个对象。所选元素周围会显示蓝色框。
4. 拖动边框各边或各角上的某一个控制点。
   • 按住 Shift 键并拖动，可使所选对象保持原始宽高比。

 

调整 SVG 的大小

如果您要调整 SVG 图片或形状的大小以使其更大，请使用宽度和高度属性（而不是 3D 缩放）。如果您使用的是“选择工具”转换控件，则可能需要更改大小样式。