CSS трансформации | WAVIFUN.RU

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

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

Css трансформации позволяют нам изменять размеры, форму и расположение объекта, не затрагивая при этом остальные элементы, находящиеся рядом.

Существует два вида CSS3 трансформации — 2D и 3D

2D трансформация

Синтаксис 2D Трансформации

	.skewY {
		transform: skewY(30deg);
		-o-transform: skewY(30deg);
		-webkit-transform: skewY(30deg);
		-moz-transform: skewY(30deg);
		-ms-transform: skewY(30deg);
	}

К 2D трансформации можно применять следующие функции:

Функция Описание Пример
none Функция none - является функцией по умолчанию. Также она отменяет любую трансформацию, если она была задана ранее.

Функция none

translate(x, y) Позволяет сдвигать элементы одновременно в двух направлениях вверх-вниз, влево-вправо. Если, например, требуется сдвинуть объект вверх и влево, то необходимо применять отрицательные значения.

translate(-10px, -15px)

translateX(n) Позволяет сдвигать элемент вправо при положительном значении, и влево при отрицательном значении

translateX(10px)

translateY(n) Сдвигает объект вверх при отрицательном значении и вниз при положительном

translateY(-10px)

scale(x, y) Данная функция позволяет масштабировать объект по ширине и высоте. Значение от 0 до 1 - делают объект меньше, значение больше 1 увеличивают объект. Отрицательное значение показывает зеркало объекта

scale(1.5, 0.5)

scale(-1)

scaleX(n) Функция делает объект шире или сужает его по горизонтали. Если значение меньше единицы, то объект сузится, если больше, то объект увеличится. Если значение отрицательное, то отобразится зеркало объекта по горизонтали.

scaleX(1.5)

scaleY(n) Функция делает объект шире или сужает его по вертикали. Если значение меньше единицы, то объект сузится, если больше, то объект увеличится. Если значение отрицательное, то отобразится зеркало объекта по вертикали.

scaleY(0.8)

rotate(ndeg) Поворачивает объект. Положительное значение - вправо, отрицательное - влево. 720deg - объект повернётся вправо на два оборота и вернётся в исходную позицию.

rotate(720deg)

skew(x-угол, y-угол) Искажает стороны объекта. Если указано одно значение, то второе определит браузер автоматически

skew(20deg)

skewX(deg) Изменяет стороны объекта относительно оси X

skewX(-20deg)

skewY(deg) Изменяет стороны объекта относительно оси Y

skewY(30deg)

initial Устанавливает значение по умолчанию
inherit Значение унаследуется от родительского элемента
matrix(a, b, c, d, x, y) Позволяет объединить несколько функций 2D Трансформации в одной. а - изменяет масштаб по горизонтали, b - изменяет стороны объекта по оси X, с - изменяет стороны объекта по оси Y, d - изменяет масштаб объекта по вертикали, x - смещает объект по оси X, y - смещает объект по оси Y

matrix(1,0.5,1.5,1.0, 1.2,1.0)

Множественная трансформация
Позволяет объединить и применить несколько функций трансформации к одному объекту. Необходимо перечислить их через пробел.
.full:hover {
		transform: skew(20deg) rotate(120deg);
		-o-transform: skew(20deg) rotate(120deg);
		-webkit-transform: skew(20deg) rotate(120deg);
		-moz-transform: skew(20deg) rotate(120deg);
		-ms-transform: skew(20deg) rotate(120deg);
	}
Множественная трансформация

skew(20deg) rotate(120deg)

Точка трансформации transform-origin
Данное свойство позволяет сместить центр трансформации. Т.е. Смещается центр, относительно которого происходит трансформация.
Значение Описание Пример
50% 50% или center Смещение трансформации на центр

50% 50%

top left Смещение трансформации в левый верхний угол

top left

110% 110% Смещение в нижний правый угол

110% 110%

Синтаксис
div {
		transform: rotate(360deg);
		-o-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform-origin: 110% 110%;
		-o-transform-origin: 110% 110%;
		-webkit-transform-origin: 110% 110%;
		-moz-transform-origin: 110% 110%;
		-ms-transform-origin: 110% 110%;
	}

В этой статье было представлены способы 2D трансформации объектов. Если вам понравилась статья или она была вам полезна, то ставьте LIKE, задавайте вопросы, комментируйте.

22.05.2017
213
0
0 0 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии

Так вы сможете получать новые статьи первыми

Pin It on Pinterest