Options de déplacement et de redimensionnement d'un élément

Vous pouvez modifier la position et la taille d'un élément de deux manières avec le format HTML5. La première consiste à utiliser les coordonnées de gauche et du haut de l'élément pour spécifier sa position, ainsi que sa largeur et sa hauteur pour définir sa taille. La seconde implique l'utilisation de la propriété CSS transform pour procéder à une translation et à une mise à l'échelle des éléments.

Google Web Designer fait appel à ces deux méthodes. Pour effectuer la mise en page d'un élément, Google Web Designer utilise les valeurs de gauche et du haut pour le positionner, et les valeurs de largeur et de hauteur pour définir sa taille. La propriété CSS transform offrant une fréquence d'images plus élevée et une animation plus fluide, Google Web Designer utilise cette méthode par défaut lors de la création d'une animation CSS.

Lorsque vous utilisez les paramètres par défaut des outils de transformation, vous constatez que ceux-ci fonctionnent correctement aussi bien pour la mise en page que pour l'animation. Si vous le souhaitez, vous pouvez néanmoins modifier la méthode utilisée pour positionner et mettre à l'échelle un élément.

Restrictions

• Les trajectoires d'animation ne sont pas compatibles avec le positionnement supérieur/gauche.
• Les animations des annonces AMPHTML ne peuvent pas reposer sur un positionnement supérieur/gauche ni un dimensionnement largeur/hauteur.

Modifier le style de positionnement

Pour modifier le style de positionnement, procédez comme suit :

1. Dans la barre d'outils, cliquez sur l'outil de sélection .
2. Cliquez sur le bouton de sélection du style de positionnement .
3. Sélectionnez l'un des styles de positionnement suivants dans le menu contextuel qui s'affiche :

   Style de positionnement	Description
   Utiliser le positionnement par défaut	Sélectionnez de préférence le positionnement supérieur/gauche pour la mise en page et transform:translate3d() pour l'animation.
   Utiliser le positionnement supérieur/gauche	Cette option vous permet d'utiliser les valeurs haut/gauche lorsque vous positionnez un élément dans une image clé.
   Utiliser la translation 3D	Cette option vous permet d'utiliser les valeurs transform:translate3d() lorsque vous positionnez un élément dans une image clé.

Modifier le style de dimensionnement

Pour modifier le style de dimensionnement, procédez comme suit :

1. Dans la barre d'outils, cliquez sur l'outil de sélection .
2. Cliquez sur le bouton de sélection du style de dimensionnement .
3. Sélectionnez l'un des styles de dimensionnement suivants dans le menu contextuel qui s'affiche :

   Style de dimensionnement	Description
   Utiliser le dimensionnement par défaut	Sélectionnez de préférence le dimensionnement en fonction de la largeur et de la hauteur pour la mise en page, et transform:scale3d() pour l'animation.
   Utiliser la largeur et la hauteur	Cette option vous permet d'utiliser les valeurs largeur/hauteur lorsque vous dimensionnez un élément dans une image clé.
   Utiliser l'échelle 3D	Cette option vous permet d'utiliser les valeurs transform:scale3d() lorsque vous mettez à l'échelle un élément dans une image clé.

Commandes de transformation

Lorsque la case Commande de transformation  est cochée dans la barre d'options de l'outil de sélection , ce dernier vous permet de modifier la taille et l'orientation des éléments sélectionnés.

Pour faire pivoter une sélection, procédez comme suit :

1. Dans la barre d'outils, cliquez sur l'outil de sélection.
2. Assurez-vous que la case Commande de transformation est cochée dans la barre d'options de l'outil.
3. Sélectionnez le ou les objets. Les commandes de rotation (deux anneaux imbriqués) apparaissent au milieu de la sélection.
4. Si vous le souhaitez, vous pouvez modifier l'axe de la rotation en faisant glisser l'anneau intérieur des commandes de rotation.
5. Faites pivoter la sélection en faisant glisser l'anneau extérieur.
   • Appuyez de manière prolongée sur la touche Maj pendant l'opération pour contraindre la rotation à respecter des incréments de 45°.

Pour redimensionner une sélection, procédez comme suit :

1. Dans la barre d'outils, cliquez sur l'outil de sélection.
2. Assurez-vous que la case Commande de transformation est cochée dans la barre d'options de l'outil.
3. Sélectionnez le ou les objets. Les éléments sélectionnés sont encadrés en bleu.
4. Faites glisser l'un des points de contrôle situés sur les côtés ou dans les angles de la boîte englobante.
   • Appuyez de manière prolongée sur la touche Maj pendant l'opération afin de conserver les proportions d'origine de la sélection.

 

Redimensionner les éléments SVG

Si vous redimensionnez une image ou une forme SVG pour l'agrandir, utilisez les propriétés de largeur et de hauteur plutôt que la mise à l'échelle 3D. Si vous utilisez la commande de transformation de l'outil de sélection, vous devrez peut-être modifier le style de dimensionnement.