Положение и размер элементов

В HTML5 существует два способа изменить положение и размер элемента. Первый способ: определять положение с помощью координат слева и сверху, а размеры – с помощью ширины и высоты элемента. Второй способ: использовать свойство CSS transform, чтобы преобразовывать и масштабировать элемент.

В Google Web Designer доступны оба способа. В макете Google Web Designer задает положение элементов, используя значения "Слева" и "Сверху", а размер – с помощью значений "Ширина" и "Высота". Свойство CSS transform по умолчанию используется для работы с анимацией, поскольку оно позволяет увеличить частоту кадров и создавать более плавную анимацию.

Инструменты преобразования с настройками по умолчанию работают правильно как с макетом, так и с анимацией. Однако стиль позиционирования и размера элемента всегда можно изменить.

Ограничения

• Пути перемещения не используются при позиционировании по верхнему и левому краю.
• Анимация в объявлениях AMPHTML не поддерживает позиционирование по верхнему и левому краю, а также заданные значения ширины и высоты.

Изменение стиля позиционирования

Чтобы изменить стиль позиционирования, выполните следующие действия:

1. На панели инструментов выберите инструмент выделения .
2. Нажмите кнопку определения стиля позиционирования .
3. Во всплывающем меню выберите стиль положения:

   Стиль позиционирования	Описание
   Использовать позиционирование по умолчанию	Использовать позиционирование по верхнему и левому краю для работы с макетом, а transform:translate3d() – для работы с анимацией.
   Использовать позиционирование по верхнему/левому краю	Определять положение элемента в ключевом кадре с помощью значений "Слева" и "Сверху".
   Использовать положение в 3D-пространстве	Определять положение элемента в ключевом кадре с помощью значений transform:translate3d().

Изменение стиля размера

Чтобы изменить стиль размера, выполните следующие действия:

1. На панели инструментов выберите инструмент выделения .
2. Нажмите кнопку определения стиля размера .
3. Во всплывающем меню выберите стиль размера:

   Стиль размера	Описание
   Использовать размер по умолчанию	Использовать значения ширины и высоты для работы с макетом, а transform:scale3d() – для работы с анимацией.
   Использовать ширину и высоту	Определять размер элемента в ключевом кадре с помощью значений ширины и высоты.
   Использовать 3D-масштабирование	Определять размер элемента в ключевом кадре с помощью значений transform:scale3d().

Элементы управления трансформацией

Если на панели настроек инструмента установлен флажок Управление трансформацией , то можно изменять размер выделенного элемента и вращать его с помощью инструмента выделения .

Чтобы повернуть выбранные элементы, выполните следующие действия:

1. Выберите инструмент выделения на панели инструментов.
2. Убедитесь, что на панели настроек инструмента установлен флажок Управление трансформацией.
3. Выберите один или несколько объектов. В центре выделенной области появится элемент управления вращением (два кольца, одно внутри другого).
4. При необходимости можно изменить центр вращения, перетащив элемент управления за внутреннее кольцо.
5. Чтобы повернуть элементы, перетащите внешнее кольцо.
   • Чтобы ограничить вращение шагом в 45°, удерживайте клавишу Shift.

Чтобы изменить размеры выбранных элементов, выполните следующие действия:

1. Выберите инструмент выделения на панели инструментов.
2. Убедитесь, что на панели настроек инструмента установлен флажок Управление трансформацией.
3. Выберите один или несколько объектов. Они будут заключены в синюю рамку.
4. Перетащите одну из контрольных точек, расположенных по углам или по сторонам рамки выделения.
   • Чтобы сохранить исходные пропорции выбранной области, удерживайте при перетаскивании клавишу Shift.

 

Изменение размера элементов SVG

Чтобы увеличить изображение или фигуру SVG, используйте свойства ширины и высоты, а не 3D-масштабирование. Для управления трансформацией с помощью инструмента выделения необходимо изменить стиль размера.