Генератор transform CSS (поворот, перемещение, масштаб, наклон и 3D)
Двигайте элементы управления и смотрите, как меняется карточка. Порядок функций в коде такой же, в каком их применяет браузер.
Как пользоватьсяПоворот, перемещение и наклон без заучивания синтаксиса
Доступно на: 
Генератор transform CSS (поворот, перемещение, масштаб, наклон и 3D): для чего нужен
Свойство transform перемещает, поворачивает, масштабирует и наклоняет элементы, не затрагивая макет страницы, и это самый лёгкий способ анимации. Двигайте элементы управления для перемещения, поворота, масштаба, наклона и 3D-поворота, выберите точку начала и перспективу и сразу смотрите, как меняется карточка.
Код выводится в порядке, в котором браузер применяет функции, а с опцией наведения включает плавный переход, работающий только у тех, кто использует мышь, и отключённый у тех, кто просил меньше движения. Страница объясняет, почему порядок важен и почему анимировать transform легче, чем top, left или width.
Как пользоваться
- Двигайте элементы управления.
- Выберите начало координат и, для 3D, перспективу.
- Скопируйте CSS.
Когда использовать
- Эффекты наведения на карточках.
- Повёрнутые и отражённые значки.
- Карточки, переворачивающиеся в 3D.
Частые вопросы
Важен ли порядок функций в transform?
Важен. «translateX(100px) rotate(45deg)» сначала сдвигает, а потом поворачивает на месте; «rotate(45deg) translateX(100px)» сначала поворачивает, а потом движется в уже повёрнутом направлении и оказывается в другой точке. Генератор использует порядок: перемещение, поворот, масштаб и наклон — самый предсказуемый.
Почему для анимации стоит использовать transform?
Transform и opacity — самые дешёвые для анимации свойства: они не заставляют браузер пересчитывать макет страницы и обычно выполняются на видеокарте. Анимация top, left, width или margin вместо них приводит к рывкам на слабых телефонах.
Что делает перспектива?
При 3D-поворотах (rotateX и rotateY) перспектива задаёт расстояние до наблюдателя: малые значения, например 300px, дают сильный искажённый 3D-эффект; большие, например 1500px, делают поворот мягче.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.