The Matrix Construction Set

Show Advanced SettingsHide Advanced Settings What is this?
Advanced
From To
Point (, ) (, )
Point (-, ) (, )
Point (, -) (, )
Point (-, -) (, )
Change HTML and CSS

Using 3D transforms will allow greater control over the transform, but fonts may appear blocky compared to 2D transforms unless the object you are transforming is physically bigger that the size you are transforming to. The show vendor prefixes option will guarentee your transforms will work even on older browsers and devices (e.g. old iPhone and Android browsers). Change HTML and CSS will allow you to customize the HTML and CSS of the transformed objects.

Unfortunately, your browser doesn't support 3D transforms, so you will not be able to use this tool to manipulate them. Please upgrade your browser if you want to use this feature.

CSS Transform Code

        
Diagram

This is a block element.

↘

This is a block element.

Unfortunately, this tool only works in browsers that support transform-origin (which doesn't include any present version of IE) and HTML5 Drag and Drop (which excludes Opera at the moment). When I update cssSandpaper with a transform-origin polyfill, I'll refactor this tool to use it so IE will work. Opera users will have to wait for HTML5 Drag and Drop support in the future.

Note: we only allow basic HTML here (e.g. no <script> tags) to avoid XSS attacks. See the Sanitize.js recipe we use for more information.

HTML Content
CSS Content

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:
  1. The Google Chrome team's dialog polyfill, for allowing non-Blink browsers to use HTML5 dialogs.
  2. Pieroxy's lz-string, to compress HTML and CSS data inside the hash of the tool's URL.
  3. Gabriel Birke's sanatize.js to ensure that the HTML stored by lz-string is not vulnerable to XSS attacks.
  4. James Coglan's sylverster to calculate the matrix arithmatic needed to calculate the CSS matrix() and matrix3d() numbers.
  5. modernizr to detect 3D transform (and other cutting edge front-end tech) support. (I am using version 3, which is currently in beta)
  6. Matrix Font by Gyusan