Функция transform: skew задает скос элемента, превращая тем самым его из прямоугольника в параллелограмм. Скос осуществляется вокруг точки, задаваемой свойством transform-origin (по умолчанию это центр элемента).

Может принимать один или два параметра. Если параметров два - первый параметр задает скос по горизонтали, а второй - по вертикали. Если параметр один - то он задает скос по горизонтали (а не по обеим сторонам!!!).

Свойства transform: skewX и transform: skewY задают скос по горизонтали и по вертикали соответственно.

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

Синтаксис

селектор {
	transform: skew(угол скоса по оси X: deg | rad | grad | turn);
}
селектор {
	transform: skew(угол скоса по оси X, угол скоса по оси Y);
}
селектор {
	transform: skewX(угол: deg | rad | grad | turn);
}
селектор {
	transform: skewY(угол: deg | rad | grad | turn);
}

Значения

Значение Описание
Угол Угол в любом допустимом в CSS формате.

Значение по умолчанию: 1.

Примеры

Пример

В данном примере блок скошен на 30 градусов влево:

#elem {
	-o-transform: skew(30deg);
	-ms-transform: skew(30deg);
	-moz-transform: skew(30deg);
	-webkit-transform: skew(30deg);
	transform: skew(30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример

В данном примере блок скошен на 30 градусов вправо:

#elem {
	-o-transform: skew(-30deg);
	-ms-transform: skew(-30deg);
	-moz-transform: skew(-30deg);
	-webkit-transform: skew(-30deg);
	transform: skew(-30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример

В данном примере блок скошен на 30 градусов по вертикали (положительное значение):

#elem {
	-o-transform: skew(0deg, 30deg);
	-ms-transform: skew(0deg,30deg);
	-moz-transform: skew(0deg,30deg);
	-webkit-transform: skew(0deg,30deg);
	transform: skew(0deg,30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример

В данном примере блок скошен на 30 градусов по вертикали (отрицательное значение):

#elem {
	-o-transform: skew(0deg, -30deg);
	-ms-transform: skew(0deg, -30deg);
	-moz-transform: skew(0deg, -30deg);
	-webkit-transform: skew(0deg, -30deg);
	transform: skew(0deg, -30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример

Задаем скос одновременно по оси X и Y:

#elem {
	-o-transform: skew(30deg, 30deg);
	-ms-transform: skew(30deg, 30deg);
	-moz-transform: skew(30deg, 30deg);
	-webkit-transform: skew(30deg, 30deg);
	transform: skew(30deg, 30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример . SkewX

Используем функцию skewX:

#elem {
	-o-transform: skewX(30deg);
	-ms-transform: skewX(30deg);
	-moz-transform: skewX(30deg);
	-webkit-transform: skewX(30deg);
	transform: skewX(30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример . SkewY

В данном примере демонстрируется, что transform: skewY(30deg) удобнее использовать вместо transform: skew(0px, 30deg) (не нужно задавать первый нулевой параметр, если мы хотим обратиться только к оси Y):

#elem {
	-o-transform: skewY(30deg);
	-ms-transform: skewY(30deg);
	-moz-transform: skewY(30deg);
	-webkit-transform: skewY(30deg);
	transform: skew(30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!