57 lines
2.2 KiB
Markdown
57 lines
2.2 KiB
Markdown
# 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
|