#html #css #css-transforms
Вопрос:
Сравните следующие два фрагмента кода-
.box {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.box1 {
margin: 100px;
transform: skew(30deg);
} <div class="box box1"></div> .box {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.box2 {
transform: matrix(1, 0, 30, 1, 0, 0);
} <div class="box box2"></div> В первом фрагменте кода, который я использовал transform: skew(30deg);
, и во втором, который я использовал transform: matrix(1,0,30,1,0,0);
Как вы можете видеть в matrix() функции, я сохранил все аргументы в их значении по умолчанию, за исключением skewX() , и я изменяю его на 30 . Что должно сработать так skew(30deg) , как я предполагаю. Поскольку в документации говорится matrix() , что используйте аргументы, подобные приведенным ниже:
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() );
ЕСЛИ вы запустите приведенные выше фрагменты кода, то обнаружите разные выходные данные. Почему они не одинаковы? Как говорит мое предположение, оно должно быть равным, потому что я использовал skewX(30deg) для обоих случаев.
Как matrix() на самом деле работает эта функция?
Какие единицы измерения используются для scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY() в матричных функциях? Как transform: skew(30deg); и transform: matrix( skewX(30) ); не дают того же результата.
Комментарии:
1. Может быть, это поможет вам понять немного лучше, а может быть, и нет dev.opera.com/articles/understanding-the-css-transforms-matrix матрица преобразований работает не так, как функция преобразования skew (), она намного более математична.
2. @JHeth Я прочитал этот документ. Но я не счел это полезным.
Ответ №1:
Использование матрицы не так просто, как вы думаете. Мы добавляем не угол, а тангенс угла:
.box {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
transform: skew(30deg);
}
.box2 {
transform: matrix(1, 0, .577, 1, 0, 0);
} <div class="box"></div>
<div class="box box2"></div> Более подробную информацию вы можете найти в спецификации: https://www.w3.org/TR/css-transforms-1/#interpolation-of-2d-matrices
Вы также можете проверить вычисленное значение элемента, используя skew(30deg) для просмотра значения матрицы:
