Показать Меню
falbar Трансформация элементов CSS3

Трансформация элементов при помощи CSS3

Трансформация элементов CSS3

В этой статье мы рассмотрим ещё одно свойство из CSS3, при помощи которого можно трансформировать HTML элементы.

Это свойство называется transform и использовать его очень просто. У него есть свой набор значений.

Первое значение, с которым нужно познакомиться, это - rotate(). Оно позволяет нам поворачивать элемент на определенный градус. В комплекте с этим идет ещё одно свойство transform-origin. Оно даёт возможность изменять расположение точки относительно которой будет осуществляется поворот.

transform: rotate(25deg);
transform-origin: 50% 100%;

transform

При использовании свойства transform лучше не забывать прописывать префиксы для различных семейств браузеров (webkit, moz, o, ms), конечно если Вы заботитесь о том пользователе, который отключает обновление в браузере.

Следующие значение свойства - translate(). При его помощи Вы можете изменять положение элемента по осям x и y.

translate

Если Вам нужно будет сделать из прямоугольника, например трапецию, то в этом случае понадобиться значение skew(). Внутрь этой функции передаются углы наклона по координатам x и y.

transform: skew(15deg, 5deg);

skew

Ещё одно полезное значение – scale(). При помощи его можно масштабировать элемент. Если добавить немного javascript кода и фантазии, то легко реализуются простенькие эффекты параллакса.

transform: scale(1.5,0.7);

scale

В принципе по трансформации всё, добавить стоит только то, что все значения свойств можно написать в одну строчку или использовать матрицу.

Выглядит это вот так:

transform: rotate(45deg) scale(0.8, 0.3) translate(0px, 25px) skew(15deg, 5deg);

Способ в одну строку

Или используя матрицу:

transform: matrix(1, 0, -0.5, 1, 0, 0);

Способ записи матрицей

Вот мы и рассмотрели ещё одно CSS3 свойство, которое делает сайты ещё более интересными.

Подписаться на обновления

Комментариев еще не оставлено