Генератор CSS — матричное преобразование
Генератор CSS — матричное преобразование
сохранить | Сброс
Граница
Ширина границы PX
SolidDottedDashedDashedDashedDashedDoubleHiddenridgeInsetOutset
Цвет границы
Индивидуальный
Left Radius
All Radius Px
Top Laft
All Radius PX
Top Laft
All Radius Px
В нижнем плане.
Нижний левый пикс.
Box Shadow
Shadow Type Outsetinset
XY Position
Shadow Fade
Shadow Dravid
Chadow Color
Добавить больше [+]
Фоны
Цвет фона
Фоновое изображение
Повтодно. Repeatrepeat-xrepeat-yrepeat
Положение фона
ключевое слово
% (проценты)
пикселей (пикселей)
по горизонтали — xleftcenterright
Vertical — Y Topcenterbottom
Горизонтальный — x %
Вертикальный — Y %
Горизонтальный — XPX
Вертикальный
Добавить еще [+]
Градиент
Ориентациялинейнаярадиальнаяэллиптическаяповторяющаяся линейнаяповторяющаяся радиальнаяповторяющаяся эллиптическая
Размердальняя сторонадальний угол0003
PX PX
%
градуса
Start Color
Конец Цвет
Добавить стоп [+]
Трансформация
Матрица (A, B, C, D, y)
A B x B x.
C D Y
0 0 1
Индивидуальное преобразование
Вращение
Перевод XY
Переход
Добавить свойство [+]
Анимация
Play/Stop
Play/Stop
.0002 Функция LineareAseEase-Inease-in-Outease-Outcubic-Bezier
Продолжительность скорости (SEC)
Запуск задержки
COUNT1 TIME 2 TimeInfinite
Изображение фильтр
Яркости
Opacity 9000
Яркости
Opacity 9000
.
Hue-rotate
Invert
CSS Generator — Matrix Transform
Свойство CSS Transform позволяет масштабировать, вращать, наклонять и перемещать элементы HTML.
1) Масштабирование — изменение размера элементов (маленький или больший)
2) Поворот — на угол вокруг начала координат
3) Наклон — преобразование по оси X или Y
4) Перемещение — перемещение элемента в направлении XY
также линейные преобразования может быть представлен матричной функцией.
Он объединяет несколько свойств преобразования в одну матричную функцию. Благодаря этому изображению из Википедии, которое проясняет все о матричном преобразовании.
001101xy(1, 0)(0, 1)(0, 0)Без изменений100100(X,Y)Перевести1001XY(W,0)(0,H)Масштаб относительно начала координатW00H00(cos θ, −sin θ)(sin θ, cos θ)θПовернуть вокруг начала координатcos θ−sin θsin θcos θ00001(1, 0)(tan ϕ, 1)ϕСдвиг в направлении x10tan ϕ100001(1, tan ψ)(0, 1)ψСдвиг в направлении y1tan ψ0100001(−1, 0) (0, −1)Отражение относительно начала координат −100−100(1, 0)(0, −1) Отражение относительно оси X100−100(−1, 0)(0, 1) Отражение относительно оси Y−100100
Уловка: отдельные функции преобразования CSS
21 февраля 2017 г. Обновлено 7 апреля 2017 г.
Мы получаем много возможностей благодаря единственному свойству transform в CSS, которое позволяет нам вращать, переводить, масштабировать и многое другое одновременно. Но объединение всех этих различных функций преобразования в одно свойство может сбить нас с толку.
Часто хочется применить разные преобразования к разным состояниям наших элементов. Скажем, у нас есть кнопка, которую мы всегда хотим перевести -150% по вертикали. Когда пользователь наводит курсор на кнопку, мы немного уменьшаем размер кнопки, а при нажатии (активное состояние) поворачиваем ее на 180 градусов. В этом примере показано, как сначала можно подумать о написании CSS для «Моей кнопки», как только что было описано, а затем кнопка «Ожидается» показывает способ получить ее, как предполагалось.
С начальными стилями на кнопке мы не просто добавляем масштаб при наведении… мы также переопределяем исходный перевод, поэтому он масштабируется до и возвращаются к translateY(0) .
Почему это? Линейная алгебра. То, как происходят эти преобразования, зависит друг от друга и от их порядка (например, повернуть (-50%, -50%), масштабировать (.4) повернуть (50 градусов) отличается от повернуть (50 градусов) перевести (-50%, -50%) масштаб(.4) ), и они сводятся к умножению матриц. Но нам обычно не нужно знать преобразования на этом уровне. Веб-разработчики просто хотят знать, как они могут поддерживать эти функции преобразования на индивидуальном уровне.
См. Порядок функций преобразования пера Дэна Уилсона (@danwilson) на CodePen.
Chrome начал реализовывать отдельные свойства, такие как translate , rotate и scale стали свойствами первого класса, как показано в этом предыдущем примере (на момент написания этой статьи требуется Chrome Canary).
Но у этого есть свои ограничения:
- В настоящее время
x,yиzвсе еще привязаны к одному свойству. - Порядок всегда будет
перевод шкалы поворотпри преобразовании в матрицы. - Первые дни — только в Chrome Canary.
Так что мы можем сделать?
Использовать переменные CSS.
Прослушивание выступления Дэвида Хуршида о CSS-переменных быстро открыло мне глаза на множество возможностей для анимации с их помощью. Только когда я начал везде размещать переменные, их сила стала еще яснее. Без дальнейших церемоний… вот хитрость, которая дает нам больше гибкости (как/что/почему после примера).
См. «Переменные CSS + преобразование = индивидуальные свойства пера» Дэна Уилсона (@danwilson) на CodePen.
Мы установили ключевое начальное преобразование для нашего элемента со всеми переменными, которые мы намереваемся изменить. Изменяя значение переменной в разных состояниях, мы можем получить правило CSS, которое выглядит ближе к нашему исходному коду, но с гораздо большей гибкостью по мере роста сложности. В этом примере мы имеем дело с гораздо большим количеством состояний, чем с тремя в исходном примере, за счет введения JavaScript (но это не обязательно: вот версия нашего исходного примера с кнопкой только на CSS). Тем не менее, фактически определяется одно свойство CSS, и мы изменяем только одну функцию преобразования за раз (будь то в JS или CSS).
Без переменных CSS нам пришлось бы выполнять некоторые вычисления для текущего перехода при изменении одной из функций преобразования (что может оказаться нетривиальным). Тогда мы могли бы знать, где в настоящее время находятся две другие функции, чтобы убедиться, что переход остается плавным. Каждый раз, когда переменная изменяется, новый переход происходит так же, как если бы вы переписали свойство transform с нуля, поэтому у вас по-прежнему не может быть разных переходов для каждой функции преобразования.