Opzioni per spostare e ridimensionare un elemento

Esistono due modi principali per modificare la posizione e le dimensioni di un elemento utilizzando HTML5. La prima modalità consiste nell'utilizzare le coordinate In alto e A sinistra dell'elemento per specificare la posizione, nonché l'altezza e la larghezza dell'elemento per specificare le dimensioni. La seconda modalità prevede l'utilizzo della proprietà CSS transform per traslare e ridimensionare gli elementi.

Google Web Designer consente di utilizzare entrambi i metodi. Per il layout degli elementi, Google Web Designer utilizza i valori In alto e A sinistra per posizionare gli elementi e i valori relativi alla larghezza e all'altezza per impostare le dimensioni. Poiché la proprietà CSS transform offre una frequenza di fotogrammi superiore e un'animazione più fluida, questo metodo viene utilizzato per impostazione predefinita in Google Web Designer per creare animazioni basate su CSS.

Quando utilizzi le relative impostazioni predefinite, gli strumenti per la trasformazione funzionano correttamente sia per il layout sia per l'animazione. Se vuoi, però, puoi modificare il metodo utilizzato per ridimensionare e posizionare un elemento.

Limitazioni

• I percorsi di animazione non funzionano con il posizionamento in alto/a sinistra.
• Le animazioni negli annunci AMPHTML non possono essere basate sul posizionamento in alto/a sinistra o sul dimensionamento larghezza/ altezza.

Cambiare lo stile di posizionamento

Per cambiare lo stile di posizionamento, procedi nel seguente modo:

1. Fai clic sullo strumento Selezione nella barra degli strumenti.
2. Fai clic sul pulsante con le opzioni relative agli stili di posizionamento .
3. Seleziona uno stile di posizionamento dal menu popup:

   Stile di posizionamento	Descrizione
   Utilizza impostazioni di posizionamento predefinite	Vengono usati preferibilmente il posizionamento in alto/a sinistra per il layout e i valori transform:translate3d() per l'animazione delle posizioni.
   Utilizza posizionamento in alto/a sinistra	Vengono usati i valori di posizionamento in alto/a sinistra per posizionare un elemento in un fotogramma chiave.
   Utilizza traslazione 3D	Vengono usati i valori transform:translate3d() per posizionare un elemento in un fotogramma chiave.

Cambiare lo stile di dimensione

Per cambiare lo stile di dimensione, procedi nel seguente modo:

1. Fai clic sullo strumento Selezione nella barra degli strumenti.
2. Fai clic sul pulsante con le opzioni relative agli stili di dimensione .
3. Seleziona uno stile di dimensione dal menu popup:

   Stile di dimensione	Descrizione
   Utilizza impostazioni di dimensione predefinite	Vengono usati preferibilmente il ridimensionamento tramite larghezza e altezza per il layout e i valori transform:scale3d() per animare la dimensione.
   Utilizza larghezza e altezza	Vengono usati i valori larghezza/altezza per ridimensionare un elemento in un fotogramma chiave.
   Utilizza ridimensionamento 3D	Vengono usati i valori transform:scale3d() per ridimensionare un elemento in un fotogramma chiave.

Comando Trasforma

Se nella barra di opzioni dello strumento è selezionata la casella di controllo Comando trasforma, lo strumento Selezione  ti consente di modificare le dimensioni e la rotazione degli elementi selezionati.

Per ruotare una selezione, procedi nel seguente modo:

1. Fai clic sullo strumento Selezione nella barra degli strumenti.
2. Assicurati che la casella di controllo Comando Trasforma nella barra di opzioni dello strumento sia selezionata.
3. Seleziona uno o più oggetti. I controlli di rotazione (due anelli concentrici) verranno mostrati al centro della selezione.
4. Se vuoi, modifica il centro della rotazione trascinando l'anello interno dei controlli di rotazione.
5. Ruota la selezione trascinando l'anello esterno dei controlli di rotazione.
   • Tieni premuto il tasto MAIUSC durante il trascinamento per vincolare la rotazione a incrementi di 45°.

Per ridimensionare una selezione, procedi nel seguente modo:

1. Fai clic sullo strumento Selezione nella barra degli strumenti.
2. Assicurati che la casella di controllo Comando Trasforma nella barra di opzioni dello strumento sia selezionata.
3. Seleziona uno o più oggetti. Gli elementi selezionati vengono circondati da un riquadro blu.
4. Trascina uno dei punti di controllo sui lati o sugli angoli del riquadro di selezione.
   • Tieni premuto il tasto MAIUSC durante il trascinamento per mantenere le proporzioni originali della selezione.

 

Ridimensionare le immagini SVG

Se stai ridimensionando un'immagine o una forma SVG per ingrandirla, usa le proprietà larghezza e altezza anziché il ridimensionamento 3D. Se stai usando il controllo trasformazione dello strumento Selezione, potresti dover cambiare lo stile di dimensione.