PricingLoginStart free
CSS Academy · Урок

Трёхмерные преобразования: rotateX, rotateY, translateZ

Вращайте и перемещайте элементы в трёхмерном пространстве с помощью функций трёхмерных преобразований CSS.

Урок 4 из 413 шагов

«Трёхмерные преобразования: rotateX, rotateY, translateZ» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Обзор 3D-преобразований

3D-преобразования CSS расширяют двумерную систему третьим измерением с помощью оси Z. Включите 3D, задав родителю perspective, а для вложенных 3D-элементов — transform-style: preserve-3d.

rotateX()

rotateX(angle) поворачивает элемент вокруг горизонтальной оси X — как будто переворачивает страницу к себе или от себя.

  <div class="page"><div class="leaf">Leaf</div></div>

rotateY()

rotateY(angle) поворачивает элемент вокруг вертикальной оси Y — как дверь на петлях.

  <div class="card-flip demo-active"><div class="card">Card</div></div>

rotateZ()

rotateZ(angle) идентична двумерной функции rotate() — это вращение в плоскости экрана.

rotate3d()

rotate3d(x, y, z, angle) поворачивает элемент вокруг пользовательского вектора оси 3D. Значения x, y и z задают направление оси.

  <div class="element">3D</div>

translateZ()

translateZ() перемещает элемент к наблюдателю или от него вдоль оси Z. Положительные значения приближают элемент, а отрицательные — удаляют.

  <div class="scene-z">
    <div class="layer-front">Front</div>
    <div class="layer-back">Back</div>
  </div>

translate3d()

translate3d(x, y, z) одновременно перемещает элемент по всем трём осям. Использование translateZ(0) принудительно переносит элемент на слой GPU — это распространённый приём оптимизации производительности.

  <div class="animated">GPU layer</div>

scale3d()

scale3d(x, y, z) изменяет масштаб в трёх измерениях. scaleZ() изменяет глубину — это полезно для граней 3D-куба.

Пример 3D-куба

Создание куба с помощью 3D-преобразований шести граней:

  <div class="cube-scene">
    <div class="cube">
      <div class="cube-face front">Front</div>
      <div class="cube-face back">Back</div>
      <div class="cube-face left">Left</div>
      <div class="cube-face right">Right</div>
      <div class="cube-face top">Top</div>
      <div class="cube-face bottom">Bottom</div>
    </div>
  </div>

Параллакс-эффект в 3D

Использование translateZ на дочерних элементах создаёт глубину в прокручиваемой 3D-сцене (параллакс в CSS):

  <div class="parallax-scene">
    <div class="far-layer">Far layer</div>
    <div class="close-layer">Close layer</div>
  </div>

Аппаратное ускорение

3D-преобразования, даже такие простые, как translateZ(0), принудительно перемещают элемент на отдельный слой GPU. Это предотвращает отрисовку во время анимации, но использует память GPU. Применяйте этот приём осознанно, а не повсеместно.

Быстрая проверка

Какая функция преобразования перемещает элемент вдоль оси Z, то есть к наблюдателю или от него?

Ответь в интерактивном уроке

Итоги

3D-преобразования CSS используют rotateX/Y/Z() для вращения вокруг каждой оси и translateZ() для перемещения в глубину. Включайте настоящий 3D-контекст с помощью perspective у родителя и transform-style: preserve-3d. Используйте backface-visibility: hidden для эффектов переворота. 3D-преобразования принудительно переносят элементы на слои GPU, обеспечивая плавную анимацию.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
40
Уроки
159
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Трёхмерные преобразования: rotateX, rotateY, translateZ» бесплатный?

Да — полный текст урока «Трёхмерные преобразования: rotateX, rotateY, translateZ» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Трёхмерные преобразования: rotateX, rotateY, translateZ»?

Вращайте и перемещайте элементы в трёхмерном пространстве с помощью функций трёхмерных преобразований CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Трёхмерные преобразования: rotateX, rotateY, translateZ»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Перемещение, вращение и масштабирование
  2. Искажение и матричные преобразования
  3. Начало преобразования и перспектива
  4. Трёхмерные преобразования: rotateX, rotateY, translateZ
← Назад к CSS Academy