35. perspective и 3D-трансформации

CSS: Perspective и 3D-трансформации

В этом уроке мы окунемся в мир 3D-трансформаций в CSS. Мы изучим, как свойство perspective создает иллюзию глубины и как использовать 3D-трансформации для создания впечатляющих визуальных эффектов на ваших веб-страницах.

Что такое Perspective?

perspective в CSS задает расстояние от пользователя до плоскости z=0. Представьте, что вы смотрите на объект в трехмерном пространстве. Чем дальше объект от вас, тем меньше он кажется. perspective имитирует этот эффект, создавая глубину на вашей веб-странице. Значение perspective определяет, насколько сильно будет выражен эффект перспективы. Чем меньше значение, тем сильнее перспектива (больше искажение).

Пример:

<div class="container">
  <div class="box">Это коробка!</div>
</div>

.container {
  width: 200px;
  height: 200px;
  perspective: 300px; /* Устанавливаем перспективу для контейнера */
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: rotateX(45deg); /* Поворачиваем коробку по оси X */
}

В этом примере мы задали перспективу для контейнера .container. Затем мы повернули дочерний элемент .box по оси X. Без perspective поворот выглядел бы как обычное 2D искажение.

3D-трансформации

CSS предоставляет ряд функций для 3D-трансформаций:

• rotateX(angle): Поворот вокруг оси X.
• rotateY(angle): Поворот вокруг оси Y.
• rotateZ(angle): Поворот вокруг оси Z (эквивалентно 2D-повороту).
• translateZ(length): Смещение вдоль оси Z.

Пример:

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: rotateX(45deg) rotateY(45deg) translateZ(50px); /* Комбинируем трансформации */
}

Здесь мы повернули коробку по осям X и Y и сместили ее вдоль оси Z. Порядок трансформаций важен, поскольку он влияет на конечный результат.

Свойство transform-style

Свойство transform-style определяет, как дочерние элементы трансформированного элемента отображаются в 3D-пространстве. Значение preserve-3d позволяет дочерним элементам участвовать в 3D-трансформации родителя.

Пример:

<div class="container">
  <div class="parent">
    <div class="child">Ребенок</div>
  </div>
</div>

.container {
  width: 200px;
  height: 200px;
  perspective: 500px;
}

.parent {
  width: 150px;
  height: 150px;
  background-color: lightgreen;
  transform: rotateX(60deg);
  transform-style: preserve-3d; /* Важно для 3D-трансформации дочерних элементов */
}

.child {
  width: 50px;
  height: 50px;
  background-color: orange;
  transform: translateY(50px) translateZ(50px);
}

Без transform-style: preserve-3d, дочерний элемент .child будет отображаться плоско, игнорируя 3D-трансформацию родителя.

Жизненный пример

3D-трансформации и perspective широко используются для создания:

• Каруселей: Создание эффекта вращающейся карусели с элементами, расположенными в 3D-пространстве.
• Кнопок с эффектом нажатия: Небольшие 3D-эффекты для кнопок, имитирующие нажатие.
• Анимаций переходов: Более сложные переходы между страницами или элементами с использованием 3D-эффектов.
• 3D-моделей и визуализаций: Отображение простых 3D-моделей или визуализаций данных непосредственно в браузере.

Многие CSS-фреймворки и библиотеки, такие как Bootstrap и Materialize, используют 3D-трансформации для создания визуально привлекательных компонентов и анимаций.

Ключевые моменты

• perspective создает иллюзию глубины, определяя расстояние от пользователя до плоскости z=0.
• rotateX, rotateY, rotateZ используются для поворота элементов в 3D-пространстве.
• translateZ смещает элементы вдоль оси Z.
• transform-style: preserve-3d позволяет дочерним элементам участвовать в 3D-трансформации родителя.
• Порядок трансформаций важен.
• 3D-трансформации можно комбинировать для создания сложных эффектов.

Интерактивный пример