The Matrix Construction Set v.2.0
This tool allows developers to create pixel perfect CSS3
Transforms by dragging and dropping objects on the screen
(or filling out the form below). The red box is the object
before transformation, the purple one is the box after
transformaton. You can drag the red box around as well as
resize it using the resizer widget in the bottom right
corner. You can also transform the green object by dragging
the three control points around the grid.
Made a mistake? Click on your browser's
back button!
Want to share your creation?
Share the whole URL! The hashtag
contains all of your layour data using LZW compression)
Examples
References
Credits
Although this tool was built using libraries I have created over the years (
config,
visibleIf and
DragDropHelpers), it would
not be as cool as it is without the following open source projects:
- The Google Chrome team's
dialog polyfill, for allowing non-Blink browsers to use HTML5 dialogs.
- Pieroxy's lz-string, to compress HTML and CSS data inside the hash of the tool's URL.
- Gabriel Birke's sanatize.js to ensure that the HTML stored by lz-string is not vulnerable to XSS attacks.
- James Coglan's sylverster to calculate the matrix arithmatic needed to calculate the CSS matrix() and matrix3d() numbers.
- modernizr to detect 3D transform (and other cutting edge front-end tech) support. (I am using version 3, which is currently in beta)
- Matrix Font by Gyusan