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

Трансформация наклона 

Трансформация наклона, вероятно, наиболее сложная для понимания, так как ее значения в градусах применяются не так, как можно было бы ожидать. Можно рассматривать наклон как оттягивание противоположных сторон блока элемента для создания заданного угла. Для краткости здесь и далее показан код CSS без приставок производителей, которые в этом случае и не понадобятся для большинства современных версий браузеров:

img#car {
        transform: skewX(21deg);
}

Также можно наклонять вертикально с помощью значения skewY(21deg). Отрицательное значение наклонит элемент в противоположную сторону. Если использовать эти значения вместе и аккуратно задать значения расположения, можно создать эффект коробки из трех изображений одинакового размера, т. е., трехмерный эффект с помощью CSS.

Трансформация масштабирования 

Масштабирование — просто скалярная величина: множитель, на который увеличивается или уменьшается размер элемента:

img#car {
        transform: scale(2);
}

Как и при трансформации поворота и других трансформациях CSS смасштабированный элемент не влияет на свое окружение.

Зачем использовать трансформацию масштабирования, если можно использовать свойства ширины и высоты? 

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

Так же, как и трансформацию наклона, трансформацию масштабирования можно ограничить значениями только x или только y с помощью записи scaleX и scaleY.

Трансформация сдвига 

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

img#obj {
        transform: translateX(2em);
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование двухмерных трансформаций CSS: трансформация поворота
• Использование трансформаций CSS: вступление
• Обзор единиц измерения CSS: углов, времени и частоты