{"id":466,"date":"2012-09-12T21:19:31","date_gmt":"2012-09-12T21:19:31","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=466"},"modified":"2020-02-25T15:11:04","modified_gmt":"2020-02-25T15:11:04","slug":"10-2d-transform","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/10-2d-transform\/","title":{"rendered":"10 2D&3D Transforms"},"content":{"rendered":"

Visual Formatting Model <\/h2>\n
\"Illustrator
Illustrator<\/figcaption><\/figure>\n
\"Web
web coordinate system<\/figcaption><\/figure>\n

The web browser lays out the page according to a coordinate system that, by default, is expressed in pixels and has the X and Y Zero point in the upper left hand corner of the parent object, like InDesign. Illustrator places it on the lower right hand corner, the way you learned it in geometry.<\/p>\n

2D Transform<\/h2>\n<\/p>\n

The transform<\/strong> property modifies this coordinate space, so that elements can be translated, rotated and scaled in this two dimensional space. When you create a value for the transform property, a new local coordinate system is established by which the position of the element is calculated. The 2D transforms add up, meaning that if you rotate the parent element, and then rotate the child element, the child will be rotated in addition to the parent’s rotation. The coordinate system then calculates the cumulative transformation matrix (CTM) for the element.\n<\/p>\n

You can apply two different transforms to the X and Y axis with the transform property values transform: <transform-function for X> <transform-function for Y>;<\/code> where the 2D transform functions<\/a> are listed in length or percentages and angles in degrees, grads, radians or turns (according to the CSS3 values and units<\/a>):<\/p>\n