The Matrix Construction Set

This tool will allow developer to do 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 green 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. Back to User Agent Man CSS3 Matrrix Transform Article

Points
From To
Point (, ) (, )
Point (-, ) (, )
Point (, -) (, )
Point (-, -) (, )
Answer
  		
  	
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.