90 lines
3.5 KiB
Markdown
90 lines
3.5 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, background image, perspective mockup, CSS perspective tool
|
|
|
|
## Usage
|
|
|
|
[Open in browser](https://ku6epxboctuk.is-a.dev/css-matrix-calc/) — 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
|
|
- **Background image upload** — load an image onto the field for visual reference
|
|
- **Widget image upload** — load an image into the widget with auto-sizing
|
|
- Three upload methods: file picker, Ctrl+V paste, drag & drop
|
|
- **Object-fit options** — contain, cover, fill, none, scale-down
|
|
- Zero dependencies, runs in any modern browser
|
|
|
|
## Background Image
|
|
|
|
Load a background image onto the field to use as a reference when positioning corners. Useful for matching perspective of existing screenshots or photos.
|
|
|
|
**How to upload:**
|
|
|
|
- Click "Load Image" and select a file
|
|
- Press Ctrl+V to paste from clipboard
|
|
- Drag & drop an image file onto the left column or the Background panel
|
|
|
|
**Adjust fit:**
|
|
|
|
- Use the object-fit dropdown to control how the image scales: contain, cover, fill, none, or scale-down
|
|
|
|
## Widget Image
|
|
|
|
Load an image directly into the widget. When an image is loaded, the widget dimensions (W/H) automatically match the image size and become locked.
|
|
|
|
**How to upload:**
|
|
|
|
- Click "Load Image" in the Widget panel
|
|
- Click the paste input field and press Ctrl+V
|
|
- Drag & drop an image file onto the Widget panel
|
|
|
|
**To remove:**
|
|
|
|
- Click "Remove" to clear the widget image and unlock dimensions
|
|
|
|
## 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)
|
|
- **Perspective matching** — load a photo of a screen, align corners, get the exact CSS transform
|
|
|
|
## 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, modes, image upload
|
|
```
|
|
|
|
## 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
|