Opções para mover e dimensionar um elemento

A alteração da posição ou do tamanho de um elemento pode ser feita de duas maneiras principais com HTML5. A primeira delas é usar as coordenadas superior e esquerda do elemento para especificar a posição, enquanto a largura e a altura do elemento são usadas para especificar o tamanho. A segunda maneira envolve o uso da propriedade CSS transform para dimensionar elementos e fazer a translação.

O Google Web Designer usa os dois métodos. No layout de elementos, o Google Web Designer usa os valores superior e esquerdo para posicionar os elementos. Já os valores de largura e altura são usados para definir o tamanho deles. Como a propriedade CSS transform fornece uma frame rate mais alta e animações mais fluidas, esse método é o padrão do GWD na criação de animações com base em CSS.

Quando aplicadas às ferramentas de transformação, as configurações padrão funcionam corretamente tanto para layouts quanto para animações. No entanto, é possível alterar o método usado para dimensionar e posicionar o elemento conforme desejado.

Limitações

• As trajetórias de animação não funcionam com o posicionamento superior/esquerdo.
• As animações dos anúncios HTML para AMP não podem ser baseadas no posicionamento superior/esquerdo nem no dimensionamento da largura/altura.

Alterar o estilo de posicionamento

Para alterar o estilo de posicionamento, faça o seguinte:

1. Na barra de ferramentas, clique na ferramenta Seleção .
2. Clique no botão de opções de estilo de posicionamento .
3. Escolha um estilo de posicionamento no menu pop-up:

   Estilo de posicionamento	Descrição
   Usar o posicionamento padrão	Prefere as posições superior/esquerda para layouts e transform:translate3d()transform:translate3d() nas animações da posição.
   Usar o posicionamento superior/esquerdo	Usa os valores superior/esquerdo ao posicionar um elemento em um frame-chave.
   Usar a translação 3D	Usa valores transform:translate3d() ao posicionar um elemento em um frame-chave.

Alterar o estilo de dimensionamento

Para alterar o estilo de dimensionamento:

1. Na barra de ferramentas, clique na ferramenta Seleção .
2. Clique no botão de opções de estilo de dimensionamento .
3. Escolha um estilo de dimensionamento no menu pop-up:

   Estilo de dimensionamento	Descrição
   Usar o dimensionamento padrão	Prefere o dimensionamento de largura e altura para layouts e usa transform:scale3d() nas animações de tamanho.
   Usar largura e altura	Usa os valores de largura/altura ao dimensionar um elemento em um frame-chave.
   Usar o dimensionamento 3D	Usa os valores transform:scale3d() ao dimensionar um elemento em um frame-chave.

Controles de transformação

Quando a caixa de seleção Controle de transformação na barra de opções de ferramenta estiver marcada, a ferramenta Seleção  permitirá que você altere o tamanho e a rotação dos elementos selecionados.

Para girar uma seleção:

1. Na barra de ferramentas, clique na ferramenta "Seleção".
2. Verifique se a caixa de seleção Controle de transformação está marcada na barra de opções da ferramenta.
3. Selecione um ou mais objetos. O controle de rotação (dois anéis aninhados) aparecerá no meio da seleção.
4. Como opção, altere o centro de rotação arrastando o anel interno dos controles.
5. Gire a seleção arrastando o anel externo dos controles de rotação.
   • Segure a tecla Shift ao arrastar os elementos para limitar a rotação a acréscimos de 45°.

Para redimensionar uma seleção:

1. Na barra de ferramentas, clique na ferramenta "Seleção".
2. Verifique se a caixa de seleção Controle de transformação está marcada na barra de opções da ferramenta.
3. Selecione um ou mais objetos. Ao redor dos elementos selecionados, há uma caixa azul.
4. Arraste um dos pontos de controle nas laterais ou nos cantos da caixa delimitadora.
   • Segure a tecla Shift ao arrastar os pontos para manter a proporção original da seleção.

 

Como redimensionar SVGs

Se você estiver redimensionando uma imagem ou forma SVG para torná-la maior, use as propriedades de largura e altura em vez do dimensionamento 3D. Se você usar o controle de transformação da ferramenta Seleção, talvez seja necessário alterar o estilo de dimensionamento.