變更元素位置和大小的選項

使用 HTML5 變更元素位置和大小的做法主要有兩種：第一種是使用元素上方和左側的座標指定位置，使用寬度和高度指定大小；第二種是使用 CSS transform 屬性來平移及縮放元素。

Google Web Designer 支援以上兩種做法。對於元素的版面配置，Google Web Designer 會使用上方與左側值定位元素，使用寬度與高度值設定大小。由於 CSS transform 屬性可提供較高的影格速率、建立較為順暢的動畫，因此 Google Web Designer 會預設為使用這種方法建立 CSS 動畫。

當您使用變形工具的預設設定，版面配置和動畫就會依此正常運作。不過必要時，您也可以改用其他方法來縮放及定位元素。

限制

• 動態路徑與上方/左側定位不相容。
• 無法根據上方/左側定位或寬度/高度大小設定 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 縮放。如果您使用選取範圍工具的轉換控制項，則可能需要變更大小樣式。