Точка трансформации с transform-origin [Модуль 8: Трансформации и переходы]: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии упражнений вы попрактикуетесь в использовании свойства `transform-origin`. Это свойство позволяет изменять стандартную точку, вокруг которой происходят CSS-трансформации (по умолчанию это центр элемента - 50% 50%). Вы научитесь задавать точку трансформации с помощью ключевых слов (например, `top`, `left`, `center`, `bottom`, `right`), процентных значений и абсолютных единиц измерения (например, пикселей). Задания построены от простого к сложному, начиная с базовых ключевых слов и заканчивая их комбинациями и использованием на интерактивных элементах.

Список тем

Трансформация из левого верхнего угла

id: 37422_css-origin-01

Задайте точку трансформации для синего квадрата так, чтобы он поворачивался вокруг своего левого верхнего угла. Квадрат уже имеет примененное свойство `transform: rotate(25deg);`, вам нужно только указать правильную точку трансформации.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  margin: 50px;
}

.rotate {
  input1: input2;
  transform: rotate(25deg);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  margin: 50px;
}

.rotate {
  input1: input2;
  transform: rotate(25deg);
}

HTML

<div class="box rotate"></div>

Используйте свойство `transform-origin`. Чтобы установить точку трансформации в левый верхний угол, можно использовать ключевые слова `left top` или процентные значения `0% 0%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Трансформация из центра (явно)

id: 37422_css-origin-02

Хотя центр является точкой трансформации по умолчанию, в этом задании вам нужно явно указать центр как точку трансформации для зеленого квадрата, используя ключевые слова. Квадрат поворачивается на -30 градусов.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: mediumseagreen;
  margin: 50px;
}

.rotate-center {
  transform-origin: input1;
  transform: rotate(-30deg);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: mediumseagreen;
  margin: 50px;
}

.rotate-center {
  transform-origin: input1;
  transform: rotate(-30deg);
}

HTML

<div class="box rotate-center"></div>

Используйте свойство `transform-origin`. Для указания центра элемента можно использовать одно ключевое слово `center` или два: `center center`. Также подойдут значения `50% 50%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Трансформация из правого нижнего угла

id: 37422_css-origin-03

Задайте точку трансформации для красного квадрата так, чтобы он масштабировался из своего правого нижнего угла. Квадрат уже имеет свойство `transform: scale(0.7);`. Вам нужно добавить свойство `transform-origin` с правильными значениями.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: tomato;
  margin: 50px;
}

.scale-corner {
  input1: input2;
  transform: scale(0.7);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: tomato;
  margin: 50px;
}

.scale-corner {
  input1: input2;
  transform: scale(0.7);
}

HTML

<div class="box scale-corner"></div>

Используйте свойство `transform-origin`. Чтобы установить точку трансформации в правый нижний угол, используйте ключевые слова `right bottom` или процентные значения `100% 100%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Трансформация с процентными значениями

id: 37422_css-origin-04

Установите точку трансформации для оранжевого прямоугольника на 75% от левого края и 25% от верхнего края. Прямоугольник поворачивается на 15 градусов.

CSS

.rectangle {
  width: 150px;
  height: 80px;
  background-color: darkorange;
  margin: 50px;
}

.rotate-percent {
  transform-origin: input1;
  transform: rotate(15deg);
}

                     .rectangle {
  width: 150px;
  height: 80px;
  background-color: darkorange;
  margin: 50px;
}

.rotate-percent {
  transform-origin: input1;
  transform: rotate(15deg);
}

HTML

<div class="rectangle rotate-percent"></div>

Используйте свойство `transform-origin`. Задайте два значения в процентах, разделенных пробелом. Первое значение отвечает за горизонтальное смещение (ось X), второе - за вертикальное (ось Y).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Трансформация с пиксельными значениями

id: 37422_css-origin-05

Задайте точку трансформации для фиолетового прямоугольника на 30 пикселей от левого края и 60 пикселей от верхнего края. Прямоугольник поворачивается на -10 градусов.

CSS

.rectangle {
  width: 150px;
  height: 80px;
  background-color: darkorchid;
  margin: 50px;
}

.rotate-pixel {
  input1: input2;
  transform: rotate(-10deg);
}

                     .rectangle {
  width: 150px;
  height: 80px;
  background-color: darkorchid;
  margin: 50px;
}

.rotate-pixel {
  input1: input2;
  transform: rotate(-10deg);
}

HTML

<div class="rectangle rotate-pixel"></div>

Используйте свойство `transform-origin`. Задайте два значения в пикселях (px), разделенных пробелом. Первое значение - смещение по оси X, второе - по оси Y.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Трансформация по центру горизонтали (одно значение)

id: 37422_css-origin-06

Установите точку трансформации для голубого квадрата по центру его горизонтальной оси и у верхнего края, используя только одно ключевое слово. Квадрат поворачивается на 40 градусов.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  margin: 50px;
}

.rotate-top-center {
  transform-origin: input1;
  transform: rotate(40deg);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  margin: 50px;
}

.rotate-top-center {
  transform-origin: input1;
  transform: rotate(40deg);
}

HTML

<div class="box rotate-top-center"></div>

Если для `transform-origin` указано только одно ключевое слово (`left`, `center`, `right`, `top`, `bottom`), второе значение по умолчанию принимается как `center`. Чтобы установить точку у верхнего края и по центру горизонтали, используйте ключевое слово `top`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Трансформация по центру вертикали (одно значение)

id: 37422_css-origin-07

Установите точку трансформации для розового квадрата по центру его вертикальной оси и у правого края, используя только одно ключевое слово. Квадрат масштабируется до 1.3.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: hotpink;
  margin: 50px;
}

.scale-right-center {
  transform-origin: input1;
  transform: scale(1.3);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: hotpink;
  margin: 50px;
}

.scale-right-center {
  transform-origin: input1;
  transform: scale(1.3);
}

HTML

<div class="box scale-right-center"></div>

Если для `transform-origin` указано только одно ключевое слово, второе значение по умолчанию становится `center`. Чтобы установить точку у правого края и по центру вертикали, используйте ключевое слово `right`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Вращение изображения из нижнего центра

id: 37422_css-origin-08

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

CSS

.rotate-image {
  display: block;
  width: 150px; /* Ширина ограничена для iframe */
  height: auto;
  margin: 50px auto;
  input1: input2;
  transform: rotate(-20deg);
}

                     .rotate-image {
  display: block;
  width: 150px; /* Ширина ограничена для iframe */
  height: auto;
  margin: 50px auto;
  input1: input2;
  transform: rotate(-20deg);
}

HTML

<img src="https://naytikurs.ru/img/7.png" alt="Example Image" class="rotate-image">

Используйте свойство `transform-origin`. Чтобы указать центр нижнего края, можно использовать ключевые слова `bottom center` или просто `bottom` (так как второе значение по умолчанию будет `center`). Также подойдет `50% 100%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Масштабирование из угла при наведении

id: 37422_css-origin-09

Сделайте так, чтобы зеленый квадрат при наведении курсора мыши увеличивался (масштабировался) из своего левого нижнего угла. Начальная точка трансформации должна быть в центре.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: seagreen;
  margin: 50px;
  transform-origin: center; /* Начальная точка */
  transition: transform 0.3s ease, transform-origin 0.3s ease;
}

.scale-hover:hover {
  input1: input2;
  transform: scale(1.4);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: seagreen;
  margin: 50px;
  transform-origin: center; /* Начальная точка */
  transition: transform 0.3s ease, transform-origin 0.3s ease;
}

.scale-hover:hover {
  input1: input2;
  transform: scale(1.4);
}

HTML

<div class="box scale-hover"></div>

Вам нужно задать `transform-origin` для состояния `:hover`. Используйте селектор `.scale-hover:hover`. Для левого нижнего угла используйте значения `left bottom` или `0% 100%`. Не забудьте добавить `transition` для плавности.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Смена точки вращения при наведении

id: 37422_css-origin-10

Изначально синий квадрат вращается вокруг своего центра. Сделайте так, чтобы при наведении курсора мыши точка вращения смещалась в правый верхний угол, а сам квадрат поворачивался на больший угол.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  margin: 50px;
  transform-origin: center;
  transform: rotate(10deg);
  transition: transform 0.4s ease, transform-origin 0.4s ease;
}

.rotate-hover:hover {
  input1: input2;
  transform: rotate(45deg);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  margin: 50px;
  transform-origin: center;
  transform: rotate(10deg);
  transition: transform 0.4s ease, transform-origin 0.4s ease;
}

.rotate-hover:hover {
  input1: input2;
  transform: rotate(45deg);
}

HTML

<div class="box rotate-hover"></div>

Задайте `transform-origin` для состояния `:hover` (селектор `.rotate-hover:hover`) со значениями `right top` или `100% 0%`. Также измените значение `transform: rotate()` для состояния `:hover`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку