0Pricing
CSS Academy · Урок

Начало преобразования и перспектива

Изменяйте точку вращения преобразований с помощью transform-origin и добавляйте глубину через perspective.

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

transform-origin по умолчанию

По умолчанию преобразования выполняются относительно центральной точки элемента: 50% 50%. Свойство transform-origin изменяет эту точку вращения.

Настройка transform-origin

Принимает ключевые слова, проценты или единицы длины. Формат: x-axis y-axis z-axis.

  <div class="spinning-logo">Logo</div>
  <div class="page-fold">Fold</div>
  <div class="tooltip">Info</div>

transform-origin при масштабировании

Масштабирование от верхнего левого угла полезно для анимации раскрытия выпадающего списка:

  <div class="dropdown open">Dropdown menu</div>

transform-origin при вращении

Вращение стрелки часов вокруг её основания:

  <div class="clock"><div class="hand"></div></div>

Свойство perspective

perspective задаёт расстояние между пользователем и плоскостью z=0 для 3D-преобразований. Меньшие значения создают более выраженное перспективное искажение, а большие — более тонкую глубину.

  <div class="scene"><div class="card">A</div></div>
  <div class="scene-wide"><div class="card">B</div></div>

perspective-origin

Изменяет точку схода перспективы. По умолчанию это центр (50% 50%).

  <div class="scene"><div class="card">Card</div></div>

perspective как функция

perspective() также можно использовать как функцию преобразования самого элемента, а не родителя. В этом случае 3D-контекст ограничивается только этим элементом.

  <div class="card">Card</div>

transform-style: preserve-3d

По умолчанию 3D-преобразования дочерних элементов сводятся к 2D. Задайте для родителя transform-style: preserve-3d, чтобы сохранить настоящее 3D-позиционирование дочерних элементов.

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

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

Классическая переворачивающаяся карточка с использованием перспективы и preserve-3d:

  <div class="card-wrapper">
    <div class="card"><div class="card-back">Back</div></div>
  </div>
  <div class="card-wrapper">
    <div class="card flipped"><div class="card-back">Back (flipped)</div></div>
  </div>

backface-visibility

backface-visibility: hidden скрывает обратную сторону элемента, преобразованного в 3D. Это необходимо для переворачивающихся карточек, у которых обратная сторона не должна быть видна через лицевую.

Объединение перспективы и начала преобразования

Эффект выразительного 3D-наклона при наведении, реагирующий на положение курсора:

  <div class="card demo-active">3D Tilt Card</div>

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

Выпадающий список использует transform: scaleY(0) для скрытия и scaleY(1) для отображения. Какое значение transform-origin заставит его раскрываться вниз от верхнего края?

Итоги

transform-origin изменяет точку вращения и масштабирования — это важно для раскрытия выпадающих списков, вращения стрелок часов и наклонов при наведении. Свойство perspective у родителя создаёт контекст глубины 3D. transform-style: preserve-3d включает вложенные 3D-элементы. backface-visibility: hidden скрывает обратные стороны элементов в эффектах переворота.

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

Урок «Начало преобразования и перспектива» бесплатный?

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

Чему я научусь в уроке «Начало преобразования и перспектива»?

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

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

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

Сколько времени занимает урок «Начало преобразования и перспектива»?

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

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

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

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

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