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

使用 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 缩放)。如果您使用的是“选择工具”转换控件,则可能需要更改大小样式
该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

登录可获取更多支持选项,以便快速解决您的问题