Генератор трансформации CSS

Составляйте CSS-преобразования с помощью ползунков — переводите, масштабируйте, вращайте, перекосите и полностью 3D — и копируйте свойство преобразования.

How to use CSS Transform Generator

1. Настройте 2D-ползунки для перевода, масштабирования, вращения и перекоса.
2. Выберите начало преобразования, чтобы изменить точку поворота.
3. Откройте раздел 3D, чтобы установить ротацию X / Y / Z, перевести Z и родительскую перспективу.
4. Нажмите Copy CSS, чтобы получить декларацию преобразования.

Что такое имя?

FAQ

Почему важен порядок трансформационных функций?

CSS применяет функции преобразования слева направо, поэтому вращение, а затем перевод дает другой результат, чем перевод, а затем вращение. Генератор выводит их в последовательном порядке; настройте CSS, если вам нужна определенная последовательность.

Почему взгляд на родителя, а не на коробку?

Для того, чтобы 3D-вращение выглядело правильно, перспектива обычно устанавливается на родительский элемент (элемент, содержащий преобразованную коробку). Инструмент применяет его к этапу предварительного просмотра и отмечает это в генерируемом комментарии CSS.

Related tools

• CSS Filter Generator
• Keyframes Animation Generator
• Cubic Bezier Generator
• Box Shadow Generator