ГРУППА КУРСА
|
Главная >
Учебник CSS >
CSS трансформацияСвойство transform осуществляет CSS трансформацию элемента. Оно имеет много значений, и каждое значение производит свой вид трансформации. ВращениеОдин из видов трансформации - вращение элемента. transform: rotate(угол)
Вращение происходит по часовой стрелке. Угол указывается в градусах. После числа нужно без пробела написать ключевое слово deg. Создадим блок, к которому далее применим вращение: Стиль: +
HTML код:
Я задал блоку id, но стиль указал для тегов <div>, потому что на страницу будут добавлены другие блоки. Теперь произведём вращение блока: Стиль:
ВАЖНО: При трансформации элемент не освобождает пространство для нового положения, а перекрывает другие элементы, как при позиционировании. Осью вращения является центр элемента. Свойство transform-origin позволяет указать другое положение оси. Это свойство устанавливает точку, относительно которой происходит трансформация. Для вращения - это ось вращения. В значении свойства указывается положение точки по оси X, потом через пробел положение точки по оси Y. По оси X бывают значения: left, center, right. По оси Y бывают значения: top, center, bottom. Также смещение точки можно указать в единицах измерения CSS и в процентах. Расстояние отсчитывается от левого верхнего угла элемента. Укажем это свойство блоку:
ПеремещениеCSS трансформация даёт возможность переместить элемент относительно его положения в потоке. transform: translate(горизонтальное смещение, вертикальное смещение) Смещение указывается в единицах измерения CSS. При положительных значениях перемещение происходит вправо и вниз, а при отрицательных влево и вверх. Добавим ещё один блок и применим к нему перемещение: Стиль:
HTML код:
Существуют значения, которые по отдельности устанавливают горизонтальное и вертикальное перемещение. transform: translateX(смещение) transform: translateY(смещение) Смещение указывается точно также. Изменение размеровCSS трансформация позволяет менять размеры элемента. transform: scale(X, Y) X - число, на которое умножается ширина элемента. Y - число, на которое умножается высота элемента. Добавим на страницу блок и изменим его размеры: Стиль:
HTML код:
Если указать отрицательное число, то получится зеркальное отображение элемента. Текст
Пример: Стиль:
HTML код:
Есть значения для отдельного изменения ширины и высоты. transform: scaleX(цифра) transform: scaleY(цифра) ИскажениеМожно осуществить искажение элемента. При этом стороны элемента сдвигаются вдоль осей координат. transform: skew(искажение по оси X, искажение по оси Y) Искажение указывается в градусах. Можно указать только первое значение. Тогда искажения по оси Y не будет. Пример: Стиль:
HTML код:
Есть значения свойства transform, которые отдельно искажают элемент по оси X и по оси Y. transform: skewX(искажение) transform: skewY(искажение) |