3D-трансформации и перспектива: Тренажер CSS

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

Этот набор упражнений посвящен изучению и практике 3D-трансформаций и перспективы в CSS. Вы научитесь создавать иллюзию глубины на веб-странице, вращать элементы в трехмерном пространстве, перемещать их по оси Z (вперед/назад) и управлять видимостью обратных сторон элементов. Задания начинаются с основ установки перспективы и простых вращений, постепенно переходя к более сложным комбинациям трансформаций, созданию эффектов вроде переворота карточки и работе с вложенными 3D-контекстами. Каждое задание предоставляет готовый HTML и CSS с пропусками, которые вам нужно будет заполнить, чтобы достичь желаемого визуального результата. Это практический тренажер без теоретических блоков, направленный на закрепление навыков работы с `perspective`, `transform` (с функциями `rotateX`, `rotateY`, `rotateZ`, `translateZ`, `rotate3d`), `perspective-origin`, `backface-visibility` и `transform-style`.

Список тем

Создание 3D-сцены

Чтобы начать работать с 3D-трансформациями, необходимо создать контекст форматирования 3D. Это делается с помощью специального свойства на родительском элементе. Добавьте необходимое свойство к контейнеру `.scene`, чтобы элемент `.box` мог отображаться в трехмерном пространстве. Укажите глубину перспективы в 800 пикселей.

CSS

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  /* Добавьте свойство для создания перспективы */
  input1: 800px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #ee6352;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  /* Небольшой поворот для наглядности перспективы */
  transform: rotateX(30deg);
}

                     .scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  /* Добавьте свойство для создания перспективы */
  input1: 800px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #ee6352;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  /* Небольшой поворот для наглядности перспективы */
  transform: rotateX(30deg);
}

HTML

<div class="scene">
  <div class="box">3D</div>
</div>

Используйте свойство `perspective` на родительском элементе (`.scene`). Оно устанавливает, насколько интенсивно 3D-элементы удаляются от зрителя. Значение задается в единицах длины (например, `px`) и определяет расстояние от зрителя до плоскости Z=0.

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

Результат

Сообщения

Выполнить

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

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

Вращение по оси X

Теперь, когда у нас есть 3D-сцена, давайте заставим элемент вращаться. Используя свойство `transform`, поверните синий квадрат на 45 градусов вокруг горизонтальной оси (оси X).

CSS

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #59cd90;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  /* Добавьте функцию вращения */
  transform: input1(45deg);
}

                     .scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #59cd90;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  /* Добавьте функцию вращения */
  transform: input1(45deg);
}

HTML

<div class="scene">
  <div class="box">X</div>
</div>

Для вращения элемента используйте свойство `transform`. Чтобы повернуть элемент вокруг оси X, примените функцию `rotateX()` со значением угла в градусах (например, `45deg`).

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

Результат

Сообщения

Выполнить

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

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

Вращение изображения по оси Y

Применим вращение к изображению. Сделайте так, чтобы при наведении курсора на контейнер `.image-container`, изображение внутри плавно поворачивалось на 180 градусов вокруг вертикальной оси (оси Y).

CSS

.scene {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  perspective: 800px;
}

.image-container {
  width: 100%;
  height: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.image-container:hover img {
  /* Добавьте функцию вращения при наведении */
  transform: input1(180deg);
}

                     .scene {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  perspective: 800px;
}

.image-container {
  width: 100%;
  height: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.image-container:hover img {
  /* Добавьте функцию вращения при наведении */
  transform: input1(180deg);
}

HTML

<div class="scene">
  <div class="image-container">
    <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  </div>
</div>

В селекторе `.image-container:hover img` используйте свойство `transform` с функцией `rotateY()`. Укажите значение `180deg` для полного оборота вокруг вертикальной оси. Не забудьте добавить `transition` к `img` для плавности.

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

Результат

Сообщения

Выполнить

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

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

Перемещение по оси Z

3D-трансформации позволяют перемещать элементы не только по осям X и Y, но и по оси Z (вглубь или наружу экрана). Переместите зеленый квадрат на 100 пикселей вперед (к зрителю), используя соответствующую функцию трансформации.

CSS

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #3ec1d3;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  transition: transform 0.5s;
  /* Добавьте функцию перемещения по Z */
  transform: input1(100px);
}

/* Добавим интерактивности для наглядности */
.scene:hover .box {
  transform: translateZ(0px);
}

                     .scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #3ec1d3;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  transition: transform 0.5s;
  /* Добавьте функцию перемещения по Z */
  transform: input1(100px);
}

/* Добавим интерактивности для наглядности */
.scene:hover .box {
  transform: translateZ(0px);
}

HTML

<div class="scene">
  <div class="box">Z</div>
</div>

Используйте свойство `transform` с функцией `translateZ()`. Положительное значение перемещает элемент ближе к зрителю, отрицательное — дальше. Укажите `100px`.

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

Результат

Сообщения

Выполнить

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

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

Изменение точки схода

Точка схода (или начало перспективы) по умолчанию находится в центре элемента, к которому применено свойство `perspective`. Ее можно изменить с помощью `perspective-origin`. Измените точку схода для сцены `.scene` так, чтобы она находилась в левом верхнем углу.

CSS

.scene {
  width: 250px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
  /* Установите точку схода в левый верхний угол */
  input1: input2 input3;
}

.box {
  width: 150px;
  height: 150px;
  background-color: #f2a359;
  color: white;
  margin: 25px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  transform: rotateY(45deg);
}

                     .scene {
  width: 250px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
  /* Установите точку схода в левый верхний угол */
  input1: input2 input3;
}

.box {
  width: 150px;
  height: 150px;
  background-color: #f2a359;
  color: white;
  margin: 25px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  transform: rotateY(45deg);
}

HTML

<div class="scene">
  <div class="box">Origin</div>
</div>

Добавьте свойство `perspective-origin` к элементу `.scene`. Значением могут быть ключевые слова (`top`, `bottom`, `left`, `right`, `center`) или процентные/пиксельные значения. Для левого верхнего угла используйте `top left` или `0% 0%`.

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

Результат

Сообщения

Выполнить

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

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

Скрытие обратной стороны

При вращении элементов в 3D их обратная сторона может быть видна. Чтобы скрыть обратную сторону элемента, когда она повернута к зрителю, используется свойство `backface-visibility`. Примените это свойство к обеим сторонам карточки (`.front` и `.back`), чтобы скрыть их обратные стороны.

CSS

.scene {
  width: 200px;
  height: 280px;
  perspective: 1000px;
  margin: 20px auto;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Нужно для вложенных 3D */
  transform: rotateY(30deg); /* Повернем для наглядности */
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  /* Добавьте свойство для скрытия обратной стороны */
  input1: input2;
}

.card__face img {
  width: 100%; height: 100%; object-fit: cover;
}

.card__face--front {
  background-color: lightblue;
}

.card__face--back {
  background-color: lightcoral;
  transform: rotateY(180deg);
}

                     .scene {
  width: 200px;
  height: 280px;
  perspective: 1000px;
  margin: 20px auto;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Нужно для вложенных 3D */
  transform: rotateY(30deg); /* Повернем для наглядности */
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  /* Добавьте свойство для скрытия обратной стороны */
  input1: input2;
}

.card__face img {
  width: 100%; height: 100%; object-fit: cover;
}

.card__face--front {
  background-color: lightblue;
}

.card__face--back {
  background-color: lightcoral;
  transform: rotateY(180deg);
}

HTML

<div class="scene">
  <div class="card">
    <div class="card__face card__face--front">
      <img src="https://naytikurs.ru/img/4.png" alt="Front">
    </div>
    <div class="card__face card__face--back">
      <img src="https://naytikurs.ru/img/5.png" alt="Back">
    </div>
  </div>
</div>

Добавьте свойство `backface-visibility` к селектору `.card__face`. Установите значение `hidden`, чтобы скрыть обратную сторону элемента.

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

Результат

Сообщения

Выполнить

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

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

Эффект переворота карточки

Создадим интерактивный эффект переворота карточки. Используя знания о `rotateY` и `backface-visibility` (оно уже применено), добавьте CSS-правило, которое будет поворачивать всю карточку (`.card`) на 180 градусов по оси Y при наведении на сцену (`.scene`).

CSS

.scene {
  width: 200px;
  height: 280px;
  perspective: 1000px;
  margin: 20px auto;
  cursor: pointer;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card__face img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
}

.card__face--front {
  background-color: #fff;
}

.card__face--back {
  background-color: #eee;
  transform: rotateY(180deg);
}

/* Добавьте правило для переворота при наведении */
.scene:hover .card {
  input1: input2(180deg);
}

                     .scene {
  width: 200px;
  height: 280px;
  perspective: 1000px;
  margin: 20px auto;
  cursor: pointer;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card__face img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
}

.card__face--front {
  background-color: #fff;
}

.card__face--back {
  background-color: #eee;
  transform: rotateY(180deg);
}

/* Добавьте правило для переворота при наведении */
.scene:hover .card {
  input1: input2(180deg);
}

HTML

<div class="scene">
  <div class="card">
    <div class="card__face card__face--front">
      <img src="https://naytikurs.ru/img/6.png" alt="Front">
    </div>
    <div class="card__face card__face--back">
      <img src="https://naytikurs.ru/img/7.png" alt="Back">
    </div>
  </div>
</div>

В селекторе `.scene:hover .card` используйте свойство `transform`. Примените функцию `rotateY()` со значением `180deg`, чтобы перевернуть карточку. Убедитесь, что у элемента `.card` есть `transition` для плавности.

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

Результат

Сообщения

Выполнить

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

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

Сохранение 3D-контекста для вложенных элементов

По умолчанию, 3D-трансформации дочернего элемента 'сплющиваются' в плоскость родителя. Чтобы вложенные элементы трансформировались в общем 3D-пространстве родителя, используется `transform-style: preserve-3d`. Примените это свойство к элементу `.parent`, чтобы трансформация `.child` (вращение по X) происходила в 3D-пространстве `.parent` (который повернут по Y).

CSS

.scene {
  width: 250px;
  height: 250px;
  perspective: 800px;
  margin: 40px auto;
  border: 1px dashed grey;
}

.parent {
  width: 180px;
  height: 180px;
  background-color: rgba(255, 100, 100, 0.7);
  margin: 35px auto;
  transition: transform 1s;
  transform: rotateY(30deg);
  position: relative;
  color: white;
  font-size: 1.2em;
  padding: 10px;
  /* Добавьте свойство для сохранения 3D */
  input1: input2;
}

.child {
  width: 100px;
  height: 100px;
  background-color: rgba(100, 100, 255, 0.7);
  position: absolute;
  bottom: 10px;
  right: 10px;
  transform: rotateX(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

                     .scene {
  width: 250px;
  height: 250px;
  perspective: 800px;
  margin: 40px auto;
  border: 1px dashed grey;
}

.parent {
  width: 180px;
  height: 180px;
  background-color: rgba(255, 100, 100, 0.7);
  margin: 35px auto;
  transition: transform 1s;
  transform: rotateY(30deg);
  position: relative;
  color: white;
  font-size: 1.2em;
  padding: 10px;
  /* Добавьте свойство для сохранения 3D */
  input1: input2;
}

.child {
  width: 100px;
  height: 100px;
  background-color: rgba(100, 100, 255, 0.7);
  position: absolute;
  bottom: 10px;
  right: 10px;
  transform: rotateX(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML

<div class="scene">
  <div class="parent">
    Parent
    <div class="child">Child</div>
  </div>
</div>

Добавьте свойство `transform-style` к элементу `.parent`. Установите значение `preserve-3d`, чтобы дочерние элементы (`.child`) рендерились в том же 3D-пространстве, что и родитель.

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

Результат

Сообщения

Выполнить

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

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

Вращение вокруг произвольной оси

Функция `rotate3d(x, y, z, angle)` позволяет вращать элемент вокруг произвольного вектора [x, y, z]. Поверните оранжевый квадрат на 60 градусов вокруг вектора, идущего по диагонали из левого верхнего в правый нижний угол на плоскости XY (вектор [1, 1, 0]).

CSS

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #ffb457;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  /* Добавьте вращение вокруг вектора [1, 1, 0] */
  transform: input1(input2, input3, input4, 60deg);
}

                     .scene {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 40px auto;
  perspective: 600px;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #ffb457;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  /* Добавьте вращение вокруг вектора [1, 1, 0] */
  transform: input1(input2, input3, input4, 60deg);
}

HTML

<div class="scene">
  <div class="box">3D</div>
</div>

Используйте свойство `transform` с функцией `rotate3d()`. Первые три аргумента задают вектор [x, y, z] (в данном случае `1, 1, 0`), а четвертый — угол вращения (`60deg`).

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

Результат

Сообщения

Выполнить

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

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

Позиционирование грани куба

Давайте начнем собирать куб. У нас есть сцена и одна грань (`.face`). Чтобы разместить эту грань как переднюю стенку куба размером 200x200px, ее нужно выдвинуть вперед по оси Z на половину размера куба (100px). Используйте трансформацию для этого.

CSS

.scene {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  margin: 50px auto;
  border: 1px dashed grey;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* Анимация для наглядности */
  animation: spin 8s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background-color: rgba(141, 198, 63, 0.7);
  color: white;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.front {
  /* Позиционируйте переднюю грань */
  input1: input2(100px);
}

@keyframes spin {
  from { transform: rotateY(0deg) rotateX(10deg); }
  to { transform: rotateY(360deg) rotateX(10deg); }
}

                     .scene {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  margin: 50px auto;
  border: 1px dashed grey;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* Анимация для наглядности */
  animation: spin 8s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background-color: rgba(141, 198, 63, 0.7);
  color: white;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.front {
  /* Позиционируйте переднюю грань */
  input1: input2(100px);
}

@keyframes spin {
  from { transform: rotateY(0deg) rotateX(10deg); }
  to { transform: rotateY(360deg) rotateX(10deg); }
}

HTML

<div class="scene">
  <div class="cube">
      <div class="face front">Front</div>
      <!-- Другие грани можно добавить позже -->
  </div>
</div>

Примените свойство `transform` к элементу `.face`. Используйте функцию `translateZ()` со значением `100px`, чтобы сдвинуть грань вперед.

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

Результат

Сообщения

Выполнить

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

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