Преобразования CSS

Используйте ползунки в рамке ниже, чтобы изменить свойства преобразования CSS для перевода, поворота, масштабирования и наклона куба в трехмерном пространстве. По мере перемещения куба в трехмерном пространстве обратите внимание на то, как он взаимодействует с элементом, помеченным z:0px, который расположен в трехмерной позиции (0, 0, 0).

Вы также можете использовать ползунок perspective для изменения свойства perspective контейнера куба, которое определяет расстояние между вами и z=0 плоскостью.

Ползунки perspective-origin определяют, где вы, наблюдатель, смотрите в трехмерное пространство для определения точки схода вида. Эта точка схода показана небольшой красной точкой. Вы можете представить изменение этих ползунков как физическое перемещение вашей головы вверх, вниз, влево и вправо, чтобы увидеть разные части куба, не перемещая сам куб.

Флажок backface-visibility определяет, устанавливаются ли задние грани куба в visible или hidden.

Куб в приведенном выше примере состоит из шести <div> элементов, все из которых стилизованы с помощью CSS для создания граней куба. Куб не рисуется с помощью контекста 2D или 3D холста, поэтому вы можете проверить грани куба с помощью инструментов разработчика вашего браузера, как вы проверяете любой другой элемент DOM. Попробуйте использовать инструмент выбора элемента инструментов разработчика вашего браузера, чтобы проверить разные грани куба по мере преобразования его положения и поворота.

Вы можете просмотреть исходный код этого примера на GitHub.

• backface-visibility
• perspective
• perspective-origin
• rotate
• scale
• transform
• transform-box
• transform-origin
• transform-style
• translate

• matrix()
• matrix3d()
• perspective()
• rotate()
• rotate3d()
• rotateX()
• rotateY()
• rotateZ()
• scale()
• scale3d()
• scaleX()
• scaleY()
• scaleZ()
• skew()
• skewX()
• skewY()
• translate()
• translate()
• translateX()
• translateY()
• translateZ()

• <transform-function>

Использование преобразований CSS

Пошаговое руководство по преобразованию элементов, стилизованных с помощью CSS.

Системы координат

Описание способов определения местоположений пикселей в объектной модели CSS.

Основы производительности: использование преобразований CSS

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

Матричная математика для веб-приложений

Описание того, как преобразования объектов могут быть представлены математическими матрицами.

• Свойства CSS:
  • animation
  • background-position
  • clip
  • clip-path
  • contain
  • content-visibility
  • isolation
  • mask
  • mask-border-source
  • mask-image
  • mix-blend-mode
  • opacity
  • overflow
  • transition
  • visibility
• Типы данных:
  • <angle>
  • <length-percentage>
  • <length>
  • <number>
  • <percentage>
  • <position>
• Термины глоссария:
  • Интерполяция
  • Контекст стекирования
• Концепции SVG:
  • <animate> элемент
  • <animateTransform> элемент
  • <set> элемент
  • transform элемент

• Базовые преобразования SVG руководство
• Модуль CSS-анимаций
• Модуль CSS-переходов