Optionen für das Verschieben und das Ändern der Größe eines Elements

Sie haben zwei Möglichkeiten, um die Position und Größe eines Elements mit HTML5 zu ändern. Die erste Möglichkeit ist, die Koordinaten des Elements für den Abstand von oben und von links zu verwenden, um die Position zu spezifizieren, und die Breite und Höhe des Elements zu verwenden, um die Größe anzugeben. Die zweite Möglichkeit ist, die CSS-Eigenschaft transform zum Verschieben und Skalieren von Elementen zu verwenden.

In Google Web Designer werden beide Möglichkeiten unterstützt. Für das Layout von Elementen werden in Google Web Designer zur Positionierung von Elementen Werte für den Abstand von oben und von links verwendet. Zur Anpassung der Größe werden Breiten- und Höhenwerte verwendet. Da die CSS-Eigenschaft transform eine höhere Frame-Rate und flüssigere Animationen liefert, wird in Google Web Designer bei der Erstellung CSS-basierter Animationen standardmäßig auf diese Methode zurückgegriffen.

Wenn Sie die Standardeinstellungen für die Bearbeitungstools verwenden, funktionieren diese sowohl für das Layout als auch für die Animation ordnungsgemäß. Sie können das Verfahren zur Skalierung und Positionierung eines Elements aber auch ändern.

Einschränkungen

• Bewegungspfade funktionieren nicht in Verbindung mit der Oben-links-Positionierung.
• Animationen in AMPHTML-Anzeigen können nicht auf der Oben-links-Positionierung oder auf einer Größenanpassung über Breite und Höhe basieren.

Positionierungs-Style ändern

So ändern Sie den Positionierungs-Style:

1. Klicken Sie in der Symbolleiste auf das Symbol für das Auswahltool .
2. Klicken Sie auf die Schaltfläche für die Positionierungs-Style-Option .
3. Wählen Sie einen Positionierungs-Style aus dem Pop-up-Menü aus.

   Positionierungs-Style	Beschreibung
   Standardpositionierung verwenden	Bevorzugen der Oben-links-Positionierung für das Layout und von transform:translate3d() bei Animation der Position
   Positionierung oben/links verwenden	Verwenden von Oben-links-Werten, wenn ein Element in einem Keyframe positioniert wird
   3D-Verschiebung verwenden	Verwenden von transform:translate3d()-Werten, wenn ein Element in einem Keyframe positioniert wird

Größenanpassungs-Style ändern

So ändern Sie den Größenanpassungs-Style:

1. Klicken Sie in der Symbolleiste auf das Symbol für das Auswahltool .
2. Klicken Sie auf die Schaltfläche für die Größenanpassungs-Style-Option .
3. Wählen Sie einen Größenanpassungs-Style aus dem Pop-up-Menü aus.

   Größenanpassungs-Style	Beschreibung
   Standardgrößenanpassung verwenden	Bevorzugen der Größenanpassung über Breite und Höhe für das Layout und von transform:scale3d() bei Animation der Größe
   Breite und Höhe verwenden	Verwenden von Werten für Breite und Höhe, wenn die Größe eines Elements in einem Keyframe angepasst wird
   3D-Skalierung verwenden	Verwenden von transform:scale3d()-Werten, wenn ein Element in einem Keyframe skaliert wird

Bearbeitungsmodi

Wenn in der Leiste mit den Tooloptionen das Kästchen Bearbeitungsmodus  aktiviert ist, können Sie mit dem Auswahltool  die Größe und die Drehung der ausgewählten Elemente ändern.

So drehen Sie eine Auswahl:

1. Klicken Sie in der Symbolleiste auf das Auswahlwerkzeug.
2. Achten Sie darauf, dass das Kästchen Bearbeitungsmodus in der Leiste mit den Tooloptionen angeklickt ist.
3. Wählen Sie das Objekt oder die Objekte aus. Die Ziehpunkte für die Rotation sind zwei überlappende Ringe und befinden sich in der Mitte der Auswahl.
4. Sie können den Mittelpunkt der Rotation ändern, indem Sie am inneren Ring der Ziehpunkte ziehen.
5. Drehen Sie die Auswahl, indem Sie am äußeren Ring ziehen.
   • Halten Sie, während Sie ziehen, die Umschalttaste gedrückt, um die Drehung auf 45°-Schritte zu beschränken

So passen Sie die Größe einer Auswahl an:

1. Klicken Sie in der Symbolleiste auf das Auswahlwerkzeug.
2. Achten Sie darauf, dass das Kästchen Bearbeitungsmodus in der Leiste mit den Tooloptionen angeklickt ist.
3. Wählen Sie das Objekt oder die Objekte aus. Ausgewählte Elemente sind am blauen Rahmen zu erkennen.
4. Ziehen Sie an einem der Kontrollpunkte an den Seiten oder Ecken des Markierungsrahmens.
   • Halten Sie, während Sie ziehen, die Umschalttaste gedrückt, damit das ursprüngliche Seitenverhältnis der Auswahl erhalten bleibt

 

Größe von SVG-Bildern anpassen

Wenn Sie ein SVG-Bild oder eine SVG-Form vergrößern möchten, nutzen Sie anstelle der 3D-Skalierung die Eigenschaften für Breite und Höhe. Falls Sie den Bearbeitungsmodus des Auswahltools verwenden, müssen Sie möglicherweise den Größenanpassungs-Style ändern.