Pull to refresh

Сдвиг блока

Reading time1 min
Views3.5K
Здравствуйте.
Есть идея к добавлению в спецификацию CSS.

Свойство skew сдвигает один указанный угол или сторону блока по горизонтали или вертикали на установленное смещение. Сдвиг стороны сдвигает оба угла этой стороны, образуя параллелограмм. Текст и внутренние элементы сохраняют своё положения (в отличии от свойства rotation) и не искажаются соответственно преобразованиям блока.

Одно свойство применяется к одной стороне или углу, противоположная сторона наследует своё состояние (положение).

Смещение задаётся в процентах от ширины соответствующей стороны или в фиксированных единицах.
Знак сдвига соответствует прямолинейной прямоугольной (декартовой) системе координат (Рис. 1.).

skew сдвиг
Рис. 1.

Поведение блока при изменении размера:
По вертикали блок увеличивает/уменьшает свою высоту соответственно блочной модели css.
По горизонтали содержимое блока не выходит за ограничения установленным свойством width этого блока или рамок установленных родительским блоком, область содержимого ограничивается соответственно отступам (Рис. 1.), исключая overflow переопределение.

skew-point: [left|center|right] || [top|center|bottom]
Начальное значение: center center

skew-length: |
Начальное значение: 0

skew: <'skew-point'> && <'skew-length'>


Пример:
Сдвиг стороны (два угла одновременно): skew: left center 10px;
Tags:
Hubs:
Total votes 7: ↑5 and ↓2+3
Comments14

Articles