From 56f01d412ee0c9464177ea6199c883ebf8eee3eb Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Tue, 23 Jun 2026 22:43:26 +0500 Subject: [PATCH] docs: add readme and license, translate to english --- LICENSE | 21 ++++++++++++++++++ README.md | 56 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 24 ++++++++++----------- js/homography.js | 2 +- js/ui.js | 6 +++--- 5 files changed, 93 insertions(+), 16 deletions(-) create mode 100644 LICENSE create mode 100644 README.md diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8861728 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Ku6epXBOCTuK + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..eddda59 --- /dev/null +++ b/README.md @@ -0,0 +1,56 @@ +# CSS Matrix3D Perspective Calculator + +A browser-based tool for generating CSS `matrix3d()` transforms with perspective projection. Define 4 corners on a field and a widget size — get ready-to-use CSS code. + +**Keywords:** CSS matrix3d, perspective transform, 3D CSS, homography, quadrilateral mapping, CSS transform generator, perspective projection, CSS 3D effects + +## Usage + +Open `index.html` in a browser (no build step required). + +- **Edit** — drag corners on the SVG field, adjust field and widget sizes +- **Preview** — see the live matrix3d() transform result + +Copy the CSS from the "CSS Output" section and paste into your project. + +## Features + +- Pure math — homography-based matrix3d() calculation +- Live preview with real-time updates +- Drag-and-drop corner positioning +- Editable field dimensions with aspect ratio lock +- Rescale coordinates option when resizing the field +- Zero dependencies, runs in any modern browser + +## Use Cases + +- **Presentations & landing pages** — render a widget or screenshot on a monitor at any angle +- **Carousels & galleries** — show product cards with perspective deformation +- **Interactive infographics** — overlay data on maps or charts with perspective +- **App previews** — place mobile UI on a device background +- **Scroll-based effects** — animate matrix3d for 3D effects without WebGL +- **Mockups & prototypes** — visually place interfaces in context (on a wall, laptop, banner) + +## Project Structure + +```text +├── index.html +├── style.css +└── js/ + ├── main.js — entry point + ├── state.js — state management + ├── homography.js — homography math + ├── svg-renderer.js — SVG rendering + ├── drag.js — drag handling + ├── inputs.js — input fields + ├── preview.js — live preview + └── ui.js — buttons and modes +``` + +## How It Works + +The tool uses [homography](https://en.wikipedia.org/wiki/Homography_(computer_vision)) to compute a 3D perspective transform from 4 corresponding points. The resulting `matrix3d()` CSS property maps a rectangular widget onto an arbitrary quadrilateral defined by the user. + +## License + +MIT diff --git a/index.html b/index.html index aafd71a..4659107 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -10,9 +10,9 @@

CSS Matrix3D Perspective Calculator

-

Задайте 4 точки на поле и размер виджета — получите CSS matrix3d() для перспективного отображения

+

Set 4 corners on the field and widget size — get CSS matrix3d() for perspective rendering

- Перетаскивайте углы на поле + Drag corners on the field
@@ -38,8 +38,8 @@
-

Основное поле

- +

Field

+
-

Виджет

+

Widget

@@ -86,7 +86,7 @@
-

Углы четырёхугольника

+

Corners

@@ -94,8 +94,8 @@

CSS Output

- - + +
diff --git a/js/homography.js b/js/homography.js index 9812ea0..c5e4c54 100644 --- a/js/homography.js +++ b/js/homography.js @@ -28,7 +28,7 @@ export function computeHomography(state) { } export function toMatrix3dCSS(H) { - if (!H) return '/* вырожденная конфигурация */'; + if (!H) return '/* degenerate configuration */'; const n = v => parseFloat(v.toFixed(8)); return [ 'transform-origin: 0 0;', diff --git a/js/ui.js b/js/ui.js index ef2117d..1baeee3 100644 --- a/js/ui.js +++ b/js/ui.js @@ -50,8 +50,8 @@ function setMode(mode) { $('btnEdit').classList.toggle('active', mode === 'edit'); $('btnPreview').classList.toggle('active', mode === 'preview'); $('modeHint').textContent = mode === 'edit' - ? 'Перетаскивайте углы на поле' - : 'Результат matrix3d() трансформации'; + ? 'Drag corners on the field' + : 'matrix3d() transform result'; } export function updateCSSOutput(state) { @@ -139,7 +139,7 @@ export function initUI(state, updateAll) { navigator.clipboard.writeText(text).then(() => { const btn = $('copyBtn'); const orig = btn.textContent; - btn.textContent = 'Скопировано!'; + btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = orig, 1500); }); });