Функция skew влияет на симметрию элемента, сдвигая его в обоих измерениях на указанный угол.
Листинг 3.22. Горизонтальный скос
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
Функция skew принимает два параметра, но здесь, в отличие от других функций, каждый из них влияет только на одно измерение; следовательно, эти параметры независимы друг от друга. В листинге 3.22 мы выполнили операцию трансформации поля заголовка, задав скос на 20° Использован только первый параметр, поэтому искажение происходит лишь в горизонтальном измерении. Если бы мы задали оба параметра, то могли бы исказить объект в обоих измерениях. В качестве альтернативы можно также применять независимые функции skewX и skewY для каждого из измерений.
Замените кодом из листинга 3.22 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.
Добавить комментарий