Точка трансформации с transform-origin: Тренажер CSS

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

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

Список тем

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

Задайте точку трансформации для синего квадрата так, чтобы он поворачивался вокруг своего левого верхнего угла. Квадрат уже имеет примененное свойство `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%`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Хотя центр является точкой трансформации по умолчанию, в этом задании вам нужно явно указать центр как точку трансформации для зеленого квадрата, используя ключевые слова. Квадрат поворачивается на -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%`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Задайте точку трансформации для красного квадрата так, чтобы он масштабировался из своего правого нижнего угла. Квадрат уже имеет свойство `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%`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Установите точку трансформации для оранжевого прямоугольника на 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).

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Задайте точку трансформации для фиолетового прямоугольника на 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.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Установите точку трансформации для голубого квадрата по центру его горизонтальной оси и у верхнего края, используя только одно ключевое слово. Квадрат поворачивается на 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Установите точку трансформации для розового квадрата по центру его вертикальной оси и у правого края, используя только одно ключевое слово. Квадрат масштабируется до 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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%`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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` для плавности.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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