Css matrix transform: matrix() — CSS: Cascading Style Sheets — Вебджем.рф | Создание и продвижение сайтов

Содержание

Конструктор CSS3 Matrix

Show Advanced НастройкиСкрыть дополнительные Настройки Что это? Скрыть пользовательский интерфейс Передовой

от

	Из	до
Точка	(, )	(, )
Точка	(-, )	(, )
Точка	(,-)	(, )
Точка	(-, -)	(, )

Я хочу использовать 3D трансформируется. Показать префиксы поставщиков Изменить HTML и CSS

Код преобразования CSS

Диаграмма

Это блочный элемент.

К сожалению, этот инструмент работает только в браузерах, поддержка transform-origin (который не включает любая существующая версия IE) и перетаскивание HTML5 (которое кроме Opera на данный момент). Когда я обновляю cssSandpaper с преобразованием-происхождением polyfill, я проведу рефакторинг этого инструмента, чтобы использовать его, чтобы IE заработал. Пользователям Opera придется дождаться поддержки HTML5 Drag and Drop. в будущем.

Примечание: здесь разрешен только базовый HTML (например, без тегов CSS-контент /* * Не стесняйтесь редактировать любой из стилей ниже. */ /* убедитесь, что все элементы, стилизованные ниже, используют рамки */ .блок, #сетка { box-sizing: граница-коробка; } /* Объект перед преобразованием */ #o1 { фон: #ffcccc; } /* Объект после преобразования */ #о2 { фон: #ccccff; } /* Общие стили для объектов-боксов. */ .блокировать { размер шрифта: наследовать; } /* CSS для сетки */ #сетка { background: url("images/background.gif") повтор прокрутки 0 0 белый; высота: 800 пикселей; положение: родственник; переполнение: скрыто; }

Этот инструмент позволяет разработчикам создавать идеальные до пикселя CSS3. Трансформируется путем перетаскивания объектов на экране. (или заполнив форму ниже). Красная коробка - это объект до преобразования, фиолетовый - это коробка после трансформация. Вы можете перетаскивать красную рамку, а также измените его размер с помощью виджета изменения размера в правом нижнем углу угол.

Вы также можете преобразовать зеленый объект, перетащив три контрольные точки вокруг сетки.

Сделали ошибку? Нажмите на значок вашего браузера Кнопка назад!

Хотите поделиться своим творением? Поделитесь полным URL! Хэштег содержит все данные вашего макета с использованием сжатия LZW)

Примеры

HTML-элемент, наложенный на ретро-экран телевизора.
Живой текст перед зданием

Анимированный текст внутри плаката Родченко.
Размытый текст (с использованием тени текста CSS) на дороге от быстро движущегося автомобиля.

Каталожные номера

Моя статья Преобразование матрицы CSS3 для математических вычислений Challenged охватывает математику, необходимую для 2D-преобразований.
Вычисление преобразований CSS matrix3d Франклин Та охватывает математику, связанную с 3D преобразования.

Кредиты

Хотя этот инструмент был построен с использованием библиотек, которые я создавал на протяжении многих лет (config, visibleIf и DragDropHelpers), это не быть таким крутым без следующих проектов с открытым исходным кодом:

Команда Google Chrome диалоговый полифил, позволяющий браузерам, отличным от Blink, использовать диалоги HTML5.
lz-строка Pieroxy для сжатия данных HTML и CSS внутри хеша URL-адреса инструмента.
sanatize.js Габриэля Бирке, чтобы убедиться, что HTML, хранящийся в lz-string, не уязвим для XSS-атак.
Сильверстер Джеймса Коглана для вычисления матричной арифметики, необходимой для вычисления чисел CSS matrix() и matrix3d().
modernizr для обнаружения поддержки 3D-преобразования (и других передовых интерфейсных технологий). (Я использую версию 3, которая в настоящее время находится в стадии бета-тестирования)

от Gyusan

Вычисление преобразований CSS matrix3d

Я очищал некоторые старые заметки со своей предыдущей работы и нашел некоторые математические каракули для вычисления преобразований CSS и решил поделиться ими. Для некоторого контекста я работал над страницей с изображением, которое выглядело так:

Я хотел добавить пасхальное яйцо, где я мог бы использовать экраны этих устройств для отображения произвольных вещей. Я думал, что это будет просто вопрос перемещения пикселей с помощью перевода/поворота/масштабирования/и т. д. с использованием преобразований CSS, но не смог добиться идеального выравнивания.

Разочарованный, я вместо этого попытался решить ее аналитически. Это означает, что для любой заданной формы мне нужно найти перспективное преобразование, которое деформирует элемент в эту форму. Как только это решено, легко написать вспомогательный скрипт WYSIWYG для вывода CSS. Вот окончательный результат:

См. Pen ifnqH Франклина Та (@fta) на CodePen.

См. код на вкладке coffeescript. Или вставьте этот текст в консоль, чтобы попробовать его на любой странице с jQuery. Вам нужно будет изменить селектор на любой элемент, к которому вы хотите добавить точки.

Используя это, вы можете перетаскивать предметы в любую форму (выпуклый четырехугольник):

Бла-бла-бла-бла-бла-бла-бла-бла-бла

В итоге я ни для чего не использовал это, но надеюсь, что кому-то еще это покажется полезным!

В оставшейся части этого поста будет объяснено, как получить уравнение для преобразования, так как я помню, что тогда я не смог найти много об этом. Глядя на код, вы увидите, что основная логика состоит всего из нескольких строк для настройки и решения системы линейных уравнений.

Теперь мы увидим, как вывести эту систему.

Допустим, у нас есть 4 угла элемента, который мы хотим преобразовать, $(x_i, y_i)$, где $i \in {0, 1, 2, 3}$, и мы хотим сопоставить каждый $(x_i, y_i)$ к некоторому $(u_i, v_i)$. Согласно документам matrix3d, преобразование, которое мы хотим, представляет собой однородную матрицу, поэтому мы должны представлять каждую точку, используя однородные координаты. В однородных координатах точка $(x, y)$ представляется как $(k x, k y, k)$ для любого $k \neq 0$. Например, $(3, 2, 1)$ и $(6, 4, 2)$ представляют точку $(3, 2)$.

Таким образом, матрица преобразования $H$, которую мы хотим найти, должна удовлетворять

$$
\underbrace{
\begin{pmatrix}
h_0 & h_1 & h_2 \\
h_3 & h_4 & h_5 \\
h_6 & h_7 & h_8 \\
\end{pmatrix}
}_{H}
\begin{pmatrix}

x_i \\
y_i \\
1 \\
\end{pmatrix}
= k_i
\begin{ pmatrix}
u_i \\
v_i \\
1 \\
\end{pmatrix}
$$

для каждого $i$, где известными являются $x_i, y_i, u_i, v_i$.

Обратите внимание, что $H$, удовлетворяющее этому требованию, не уникально. Например, вы можете масштабировать $H$ на некоторую константу, и результирующая матрица по-прежнему будет правильно отображать точки (поскольку вы также можете масштабировать $k_i$ на ту же величину и по-прежнему представлять ту же однородную точку). Таким образом, предполагая $h_8 \neq 0$ (см. сноску ^[1] ), мы всегда должны иметь возможность масштабировать обе стороны до $h_8 = 1$, что немного упростит нам задачу:

$$
\begin{pmatrix}
H_0 & H_1 & H_2 \\
H_3 & H_4 & H_5 \\
H_6 & H_7 & 1 \\
\ END {PMATRIX}

\ BENGIN end{pmatrix}
= k_i
\begin{pmatrix}
u_i \\
v_i \\
1 \\
\end{pmatrix}
$$

Теперь мы должны попытаться привести его к виду, который мы можем решить . Умножая получаем:

$$
\begin{align*}
x_i h_0 + y_i h_1 + h_2 & = k_i u_i \\
x_i h_3 + y_i h_4 + h_5 & = k_i v_i \\
x_i h_6 + y_i h_7 + 1 & = k_i \\
\end{align*}
$$

От $k_i$ можно избавиться, подставив его из третьего в первые два уравнения:

$ $
\begin{align*}
x_i h_0 + y_i h_1 + h_2 & = u_i x_i h_6 + u_i y_i h_7 + u_i \\
x_i h_3 + y_i h_4 + h_5 & = v_i x_i h_6 + v_i y_i h_7 + v_i \\
\end{align*}
$$

Помните, что мы пытаемся найти $h_i$, поэтому мы должны попытаться их разделить:

$$
\begin{array}{rcccl}
x_i h_0 + y_i h_1 + h_2 & & - u_i x_i h_6 - u_i y_i h_7 = u_i \\
& x_i h_3 + y_i h_4 + h_5 & - v_i x_i h_6 - v_i y_i h_7 = v_i \\
\end{array}

Что в матричной записи:

$$
\begin{pmatrix}
x_i & y_i & 1 & 0 & 0 & 0 & -u_i x_i & -u_i y_i \\
0 & 0 & 0 & x_i & y_i & 1 & -v_i x_i & -v_i y_i \\
\end{pmatrix}
\begin{pmatrix}
h_0 \\
h_1 \\
h_2 \\
h_3 \\
h_4 \\
h_5 \\
h_6 \\
h_7 \\
\end{pmatrix} = \begin{pmatrix}
u_i \\
v_i \\
\end{pmatrix }
$$

Поскольку у нас есть 4 таких отображения, мы можем записать их так:

$$
\begin{pmatrix}
x_0 & y_0 & 1 & 0 & 0 & 0 & -u_0 x_0 & -u_0 y_0 \ \
0 & 0 & 0 & x_0 & y_0 & 1 & -v_0 x_0 & -v_0 y_0 \\
x_1 & y_1 & 1 & 0 & 0 & 0 & -u_1 x_1 & -u_1 y_1 \\
0 & 0 & 0 & x_1 & y_1 & 1 & -v_1 x_1 & -v_1 y_1 \\
x_2 & y_2 & 1 & 0 & 0 & 0 & -u_2 x_2 & -u_2 y_2 \\
0 & 0 & 0 & x_2 & y_2 & 1 & -v_2 x_2 & -v_2 y_2 \\
x_3 & y_3 & 1 & 0 & 0 & 0 & -u_3 x_3 & -u_3 y_3 \\
0 & 0 & 0 & x_3 & y_3 & 1 & -v_3 x_3 & -v_3 y_3 \\
\end{pmatrix}
\begin{pmatrix}
h_0 \\
h_1 \\
h_2 \\
h_3 \
h_4 \
h_5\
h_6\
h_7\
\end{pmatrix} = \begin{pmatrix}
u_0\
v_0\
u_1\
v_1\\
у_2 \\
v_2 \\
u_3 \\
v_3 \\
\end{pmatrix}
$$

На этом мы закончили, потому что это в форме $Ah = b$, поэтому мы можем просто бросить это в библиотека матричной алгебры для решения $h$. Он должен выдать обратно $h_i$, что позволит нам восстановить желаемое преобразование:

$$
H =
\begin{pmatrix}
h_0 & h_1 & h_2 \\
h_3 & h_4 & h_5 \\
h_6 & h_7 & h_8 \\
\end{pmatrix}
$$

Последняя проблема заключается в том, что matrix3d действительно принимает матрица 4 на 4, а не 3 на 3. Поскольку нам не нужны значения $z$ (поскольку все наши точки находятся в одной плоскости, $z=0$) мы можем просто сделать $ z$ отображать обратно на себя. Вот так:

\[
\begin{pmatrix}
h_0 & h_1 & 0 & h_2 \\
h_3 & h_4 & 0 & h_5 \\
0 & 0 & 1 & 0 \\
h_6 & h_7 & 0 & h_8 \\
\end{pmatrix}
\]

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

Когда я впервые сделал это, я не знал, что искать в Google, поэтому мне пришлось выводить это вручную.

Css matrix transform: matrix() — CSS: Cascading Style Sheets