{"id":2159,"date":"2011-01-07T01:49:57","date_gmt":"2011-01-07T05:49:57","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=2159"},"modified":"2016-10-03T12:54:40","modified_gmt":"2016-10-03T16:54:40","slug":"css3-matrix-transform-for-the-mathematically-challenged","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2011\/01\/07\/css3-matrix-transform-for-the-mathematically-challenged\/","title":{"rendered":"The CSS3 <code>matrix()<\/code> Transform for the Mathematically Challenged"},"content":{"rendered":"\r\n\r\n\r\n<div class=\"importantNotes\">\r\n<h3>Notes:<\/h3>\r\n<ul>\r\n<li><strong>This article was not rendering correctly in Firefox 4.x due to a change in how that browser handles MathML.<\/strong>  This issue has now been fixed as of May 1, 2011.<\/li>\r\n<li>If you are not familar with 2D-Transforms, take a look at my other article <cite><a href=\"https:\/\/www.useragentman.com\/blog\/2010\/03\/09\/cross-browser-css-transforms-even-in-ie\/\">Cross Browser CSS Transforms \u2013 even in IE<\/a><\/cite><\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\n\r\n<div  class=\"wp-caption alignright\" style=\"width: 419px;\"><a href=\"\/matrix\"><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/01\/matrixConstructionSetScreenshot.png\" alt=\"Screenshot of the Matrix Construction Set\" title=\"matrixConstructionSetScreenshot\"  class=\"size-full wp-image-2055\" \/><\/a>\r\n<p class=\"wp-caption-text\"><a href=\"\/matrix\">The Matrix Construction Set<\/a> allows you to make a pixel perfect transformation by just dragging and dropping objects around.<\/p>\r\n<\/div>\r\n\r\n\r\n<p>The CSS3 <code>transform<\/code> property can do some really cool things - with it, web designers can rotate, scale, skew and flip objects quite easily.  However, in order for deisgners to have <strong>fine-grained, pixel level control over their transforms<\/strong>, it would be really helpful to understand how the <strong><code>matrix()<\/code> function<\/strong> works.  With the <code>matrix()<\/code> function, designers can position and shape their transformations exactly where they want to.<\/p>\r\n\r\n<p>The problem is, <strong>not many people actually understand what the numbers in the matrix filter actually mean<\/strong>.  To solve this issue, I have created a tool, which I call the <a href=\"\/matrix\/\">CSS3 Matrix Construction Set<\/a> that can take any block-element, positioned anywhere on the page, transform it anywhere else on the page using the <code>matrix()<\/code> filter, and reveal the correct CSS code for this operation.  <a href=\"\/matrix\/\">Look at the tool now<\/a> and if that is all you are interested in, you can stop there.  However, <strong>if you what to know what the numbers in the <code>matrix()<\/code> function actually mean<\/strong>, and why you want such knowledge in the first place, read on.  I'll try to explain this as simply as possible (and please feel free to use the feedback form if you have any opinions on how to make this article better).<\/p>\r\n\r\n<a class=\"exampleLink\" href=\"\/matrix\/\">Take a Look at the CSS3 Matrix Construction Set<\/a>\r\n\r\n<div class=\"importantNotes\">\r\n<p><strong>Note:<\/strong> This tool works in all modern versions of Firefox, Sarari and Chrome.  Although it is not usable in Opera (due to its lack of support for <a href=\"https:\/\/www.useragentman.com\/blog\/2010\/01\/10\/cross-browser-html5-drag-and-drop\/\">HTML5 drag and drop<\/a>) the CSS code it produces in other browsers <strong>is<\/strong> usable in that browser.  The tool also does not work in IE since neither that browser, nor my CSS3 polyfill library, <a href=\"https:\/\/www.useragentman.com\/blog\/csssandpaper-a-css3-javascript-library\/\">cssSandpaper<\/a>, support the <code>transform-origin<\/code> property.  I hope to fix cssSandpaper to implement this in a future release, but in the meantime, please read the note at the end of this article for a workaround for this issue.<\/p>\r\n<\/div>\r\n\r\n<h2>Matrices: Why Should I Care?<\/h2>\r\n\r\n<p>Matrices are to transforms like RGB hex codes are to colors: they are representations that are easy for computers to understand, but not human beings.  Sure, web designers can use the <code>rotate()<\/code>, <code>skew()<\/code>, <code>scale()<\/code> and <code>translate()<\/code> functions to fulfill their transformation needs ... why should we bother with <code>matrix()<\/code> at all?  There are a few cases when you may want to:<\/p>\r\n\r\n<dl>\r\n     <dt>Brevity:<\/dt>\r\n     <dd>Using matrices, it is possible to represent a complex string of 2D transforms like this:\r\n\r\n<blockquote class=\"code\">\r\n<pre>\r\n#object {\r\n    transform-origin: 0 0;\r\n    transform: rotate(15deg) translateX(230px)  scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px)\r\n}\r\n<\/pre>\r\n<\/blockquote>\r\n\r\nusing one <code>matrix()<\/code> rule like this:\r\n\r\n<blockquote class=\"code\">\r\n<pre>\r\n#object {\r\n    transform-origin: 0 0;\r\n    transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px)\r\n}\r\n<\/pre>\r\n<\/blockquote>\r\n\r\n<p>(<strong>Note:<\/strong> I have ignored the vendor-specific variants (e.g. <code>moz-transform<\/code>, etc.) for the sake of brevity).<\/p>\r\n\r\n<\/dd>\r\n     <dt>Pixel-Perfection:<\/dt>\r\n     <dd>If you know exactly how you want your transformation to look, it'll take a bit of fiddling around to get it to look how you want using the other transform functions, and it may not be pixel perfect if you lack patience (like I do).  However, using a tool like the Matrix Construction Set, you can place the transform exactly where you want (This is analogous to using a color wheel to choose RGB colors for you, instead of using keywords like <code>red<\/code>, <code>green<\/code> or <code><a href=\"http:\/\/www.colordic.org\/colorsample\/1019.html\">peachpuff<\/a><\/code>).<\/dd>\r\n\r\n     <dt>JavaScript:<\/dt>\r\n     <dd>Revealing an object's transform information using JavaScript's <code>getComputedStyle()<\/code> function will yield a <code>matrix()<\/code> function in all current web browsers that support CSS3 transforms, <strong>even if it was rendered using other transform functions like <code>rotate()<\/code><\/strong>.  For example, the object below has been rotated 45&deg; using <code>transform: rotate(45deg)<\/code>:\r\n\r\n\r\n<div class=\"exampleBackground\">\r\n<div id=\"exampleRotation\">\r\nThis object has been rotated 45&deg;\r\n<\/div>\r\n<\/div>\r\n\r\nBut <a href=\"#\" onclick=\"\r\n  if (!window.getComputedStyle) {\r\n     alert('This browser does not support getComputedStyle()');\r\n     return false;\r\n  }\r\n  var props = ['MozTransform', 'WebkitTransform', 'OTransform', 'MSTransform', 'transform'];\r\n  var compStyle = window.getComputedStyle(document.getElementById('exampleRotation'), null);\r\n  for (var i=0; i<props.length; i++) {\r\n\r\n    var style = compStyle[props[i]];\r\n    if (style != null) {\r\n       alert('Calling getComputedStyle() on the rotated element gives: ' + style);\r\n       return false;\r\n    }\r\n  }\r\n  alert('This browser doesn\\'t support CSS3 Transforms');\r\n    return false;\">this link, which shows the object's computed style<\/a> will reveal that internally it stores a <code>matrix()<\/code> function.<\/dd>\r\n<\/dl>\r\n\r\n\r\n<h2>Ok, What Does The Markup Look Like?<\/h2>\r\n\r\n<p>The <code>matrix()<\/code> function takes 6 parameters in order for it to work:<\/p>\r\n \r\n<blockquote class=\"code\">\r\n<pre>\r\n#transformedObject {\r\n     -moz-transform:    matrix(1.4488, -0.3882, 0.3882, 1.4489, 400px, -100px);\r\n     -webkit-transform: matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);\r\n     -o-transform:      matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);\r\n     transform:         matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);\r\n}\r\n<\/pre>\r\n<\/blockquote>\r\n\r\n<p><strong>Note the difference with the Firefox implementation of <code>matrix()<\/code><\/strong> &mdash; the last two elements need the <code>px<\/code> units after it.  For now, think of it is a difference in notation, but we'll explain why this is later.<\/p>\r\n\r\n\r\n<h2>But What Do The Numbers Mean?<\/h2>\r\n \r\n<p>In order to explain what they mean, I will have to define a few math-concepts here.  <strong>Don't panic if you are mathematically challenged<\/strong>.  These concepts are not that hard to understand, but there is a bit of explanation needed.  Why should you torture yourself if you hate math?<\/p>\r\n\r\n<dl>\r\n<dt>If you are a designer:<\/dt>\r\n<dd>Think of the stuff below as informational.  If you use the Matrix Construction Set <strong>you won't need to calculate anything by hand<\/strong> (but wouldn't you want to have an idea what the numbers mean anyway?)<\/dd>\r\n<dt>If you are a JavaScript developer:<\/dt>\r\n<dd><em>This information will be invaluable when optimizing scripts that rely on transformation effects.<\/em>  Just try to understand the basic concepts here, and if you still need help, use the <a href=\"http:\/\/sylvester.jcoglan.com\/\">Sylvester JavaScript library<\/a> to do the heavy lifting for you.<\/dd>\r\n<dt>If you want to be an &uuml;ber-geek:<\/dt>\r\n<dd>All those matrix jokes you hear at parties will suddenly start to make sense!<\/dd>\r\n<\/dl>\r\n\r\n<div class=\"wp-caption aligncenter\" >\r\n<a href=\"http:\/\/xkcd.com\/184\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/01\/matrix_transform.png\" alt=\"In fact, draw all your rotational matrices sideways. Your professors will love it! And then they&#039;ll go home and shrink.\" title=\"In fact, draw all your rotational matrices sideways. Your professors will love it! And then they&#039;ll go home and shrink.\" width=\"400\" height=\"152\" class=\"aligncenter size-full wp-image-2186\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/01\/matrix_transform.png 400w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/01\/matrix_transform-300x114.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a>\r\n<p class=\"wp-caption-text\">Finally you'll be able to understand why all the geeks at work find <a href=\"http:\/\/xkcd.com\/184\/\">this XKCD comic<\/a> so funny.<\/p>\r\n<\/div>\r\n\r\n\r\n<h2>Terminology<\/h2>\r\n\r\n<h3>Matrix<\/h3>\r\n\r\n<p>The easiest way to think of a matrix is as a group of numbers written in a rectangle or square.  For our purposes, we will be dealing with 3x3 matrices, such as this one below:<\/p>\r\n\r\n<div class=\"equation\">\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>3<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>6<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n<\/div>\r\n\r\n<p>That's nine numbers!  So how come the CSS3 <code>matrix()<\/code> function only has six?<\/p>\r\n\r\n<blockquote class=\"code\">\r\n<pre>\r\n#transformedObject {\r\n     transform:  matrix(1, 2, 3, 4, 5, 6);\r\n}\r\n<\/pre>\r\n<\/blockquote>\r\n\r\nFor CSS3 2D transforms, we only deal with 3x3 matrices that have the <strong>two bottom-left numbers that are equal to zero, and the bottom-right value equal to 1<\/strong>. As a result, these two notations are equal:\r\n\r\n<div class=\"equation\">\r\n<code>matrix(1, 2, 3, 4, 5, 6) = <\/code>\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>3<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>6<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n<\/div>\r\n\r\n\r\n<h3>Dot Product<\/h3>\r\n\r\n<p>Next we are going to explain what a <strong>dot product<\/strong> is.  At first, this may not seem like this is related to matrices at all, but I promise it does ... just read on and you'll understand why in no time.  Trust me. :-)<\/p>\r\n\r\n<p>Let's say you have two (x, y) points,\r\n\r\n\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>\r\n\tand\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>.  The dot product of these two points (written <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>) is what you get when you multiply the two x-coordinates, multiply the two y-coordinates, and then add them together:<\/p>\r\n\r\n<div class=\"equation\">\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn >1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t          <mo>&middot;<\/mo>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n                  <mo> ) <\/mo>\r\n          <\/mrow> <\/math>\r\n\t         = 1x4 + 2x5 = 4 + 10 = 14\r\n<\/div>\r\n\r\nThis doesn't only work for 2-dimensional coordinates, but also in 3-dimensions and higher:\r\n\r\n<div class=\"equation\">\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n                      <mtd> <mn>3<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n                      <mtd> <mn>6<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math> = 1x4 + 2x5  + 3x6 = 4 + 10 + 18  = 32\r\n<br \/><br \/>\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n                      <mtd> <mn>3<\/mn> <\/mtd>\r\n                      <mtd> <mn>10<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n                      <mtd> <mn>6<\/mn> <\/mtd>\r\n                      <mtd> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math> = 1x4 + 2x5  + 3x6 + 10x20 = 4 + 10 + 18 + 200 = 232\r\n<\/div>\r\n\r\n<p>Got it?  It's pretty simple, right?  Note that when we write (x, y) co-ordinates like <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>x<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>y<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>, we call <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>x<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>y<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math> a <strong>vector<\/strong>.  Vector notation can be written horizontally, (e.g. <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>x<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>y<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>) or vertically (e.g. <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>x<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n                    <mtr>\r\n                       <mtd> <mn>y<\/mn> <\/mtd>\r\n                    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math>).  <strong>When using them in 2D transforms, we always add an extra co-ordinate with a number 1 at the end.<\/strong>  So (20, 90) would be written \r\n<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>20<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>90<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math> or like <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>20<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n                    <mtr>\r\n                       <mtd> <mn>90<\/mn> <\/mtd>\r\n                    <\/mtr>\r\n                    <mtr>\r\n                       <mtd> <mn>1<\/mn> <\/mtd>\r\n                    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t  <\/mrow>\r\n\t<\/math> in vector notation.\r\n\r\n<h3>Multiplicatying a Matrix with a Vector<\/h3>\r\n\r\n<p>So, what does the dot product have to do with matrices?  Well the idea of the dot product can also be extended to matrices.  Let's say you need to multiply the following together: <\/p>\r\n\r\n<div class=\"equation\">\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr color=\"#ff0000\" fontweight=\"bold\">\r\n\t\t      <mtd mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd mathbackground=\"#ffcccc\"> <mn>3<\/mn> <\/mtd>\r\n\t\t      <mtd mathbackground=\"#ffcccc\"> <mn>4<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>30<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n<\/div>\r\n\r\nTo do this, you need to produce the dot product of each of the matrix's rows with the vector like this:\r\n\r\n<div class=\"equation\">\r\n\t<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr color=\"#ff0000\" fontweight=\"bold\">\r\n\t\t      <mtd mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd mathbackground=\"#ffcccc\"> <mn>3<\/mn> <\/mtd>\r\n\t\t      <mtd mathbackground=\"#ffcccc\"> <mn>4<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>30<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> =  <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn><mo>&#215;<\/mo><mn>20<\/mn> <mo>+<\/mo> <mn>3<\/mn><mo>&#215;<\/mo><mn>30<\/mn> <mo>+<\/mo> <mn>4<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n        = \r\n <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>20<\/mn><mo>+<\/mo><mn>90<\/mn><mo>+<\/mo><mn>4<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn> 114<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math>\r\n\r\n<\/div>\r\n\r\n<div class=\"equation\">\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>3<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr  color=\"#ff0000\" fontweight=\"bold\">\r\n\t\t      <mtd  mathbackground=\"#ffcccc\"> <mn>2<\/mn> <\/mtd>\r\n\t\t      <mtd  mathbackground=\"#ffcccc\"> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd  mathbackground=\"#ffcccc\"> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>30<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> =  <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd > <mn>115<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>2<\/mn><mo>&#215;<\/mo><mn>20<\/mn> <mo>+<\/mo> <mn>4<\/mn><mo>&#215;<\/mo><mn>30<\/mn> <mo>+<\/mo> <mn>5<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd > <mn>115<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>40<\/mn> <mo>+<\/mo> <mn>120<\/mn> <mo>+<\/mo> <mn>5<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd > <mn>115<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>165<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n<\/div>\r\n\r\n\r\n<div class=\"equation\">\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>3<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>2<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>4<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>5<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr   color=\"#ff0000\" fontweight=\"bold\">\r\n\t\t      <mtd  mathbackground=\"#ffcccc\"> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd  mathbackground=\"#ffcccc\"> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd  mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>30<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> =  <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd > <mn>115<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>165<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>0<\/mn><mo>&#215;<\/mo><mn>20<\/mn> <mo>+<\/mo> <mn>0<\/mn><mo>&#215;<\/mo><mn>30<\/mn> <mo>+<\/mo> <mn>1<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd > <mn>115<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>165<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>0 + 0 + 1<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd > <mn>115<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>165<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"><mn>1<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n<\/div>\r\n\r\nA little bit more complicated that the dot product, but not too bad.\r\n\r\n<h2>So, How Does This Relate To CSS3 Transforms?<\/h2>\r\n\r\nA transformation of an block using the <code>matrix()<\/code> function is done by <strong>multiplying the matrix with each of the corner-coordinates of the block<\/strong> which will give the corners of the new object <strong>when the <code>transform-origin<\/code> is set to <code>0 0<\/code><\/strong>. For example let's say you have an HTML element styled like this:<\/p>\r\n\r\n<blockquote class=\"code\">\r\n<pre>\r\n#transformedObject {\r\n     position: absolute;\r\n     left: 0px;\r\n     top: 0px;\r\n     width: 200px;\r\n     height: 80px;\r\n     transform:  matrix(0.9, -0.05, -0.375, 1.375, 220, 20);\r\n     transform-origin: 0 0;\r\n}\r\n<\/pre>\r\n<\/blockquote>\r\n\r\n<p>What is the end result?  Well, first let's take a look at the object <strong>without<\/strong> the transform CSS:<\/p>\r\n\r\n\r\n<div id=\"originalExample\" class=\"exampleBackground\">\r\n    <div class=\"point top-left-pt\"><\/div>\r\n    <div class=\"point top-right-pt\"><\/div>\r\n    <div class=\"point bottom-left-pt\"><\/div>\r\n    <div class=\"point bottom-right-pt\"><\/div>\r\n    <div class=\"coord top-left\">(0, 0)<\/div>\r\n      <div class=\"coord top-right\">(200, 0)<\/div>\r\n      <div class=\"coord bottom-left\">(0, 80)<\/div>\r\n      <div class=\"coord bottom-right\">(200, 80)<\/div>\r\n   <div id=\"exampleObject1\">\r\n      \r\n   <\/div>\r\n<\/div>\r\n\r\n<p>When the browser applies the transform to this block, it takes the matrix and multiplies it to each of the corner coordinates.  For example, taking the bottom-right corner, (200, 80) or \r\n<math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>200<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>80<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n                  <\/mtable>\r\n                <mo> ) <\/mo>\r\n          <\/mrow>\r\n<\/math>, we get:\r\n<\/p>\r\n\r\n<div class=\"equation\">\r\n    <p>\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd   mathbackground=\"#ffcccc\"> <mn>0.9<\/mn> <\/mtd>\r\n\t\t      <mtd   mathbackground=\"#ffcccc\"> <mn>-0.375<\/mn> <\/mtd>\r\n\t\t      <mtd   mathbackground=\"#ffcccc\"> <mn>220<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>-0.05<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1.375<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>200<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>80<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> =  <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd  color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>0.9<\/mn><mo>&#215;<\/mo><mn>200<\/mn> <mo>+<\/mo> <mn>-0.375<\/mn><mo>&#215;<\/mo><mn>80<\/mn> <mo>+<\/mo> <mn>220<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math>  = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd  color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>180<\/mn> <mo>-<\/mo><mn>30<\/mn> <mo>+<\/mo> <mn>220<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd  color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>370<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n        <\/p>\r\n        <p>\r\n              <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0.9<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>-0.375<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>220<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd    mathbackground=\"#ffcccc\"> <mn>-0.05<\/mn> <\/mtd>\r\n\t\t      <mtd    mathbackground=\"#ffcccc\"> <mn>1.375<\/mn> <\/mtd>\r\n\t\t      <mtd    mathbackground=\"#ffcccc\"> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>200<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>80<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>370<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>-0.05<\/mn><mo>&#215;<\/mo><mn>200<\/mn> <mo>+<\/mo> <mn>1.375<\/mn><mo>&#215;<\/mo><mn>80<\/mn> <mo>+<\/mo> <mn>20<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n       <\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>370<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>-10<\/mn> <mo>+<\/mo> <mn>110<\/mn> <mo>+<\/mo> <mn>20<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>370<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd  color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>120<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>.<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math>\r\n        <\/p>\r\n\r\n          <p>\r\n              <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0.9<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>-0.375<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>220<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd > <mn>-0.05<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>1.375<\/mn> <\/mtd>\r\n\t\t      <mtd  > <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd  mathbackground=\"#ffcccc\"> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd   mathbackground=\"#ffcccc\"> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd   mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>200<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>80<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>370<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>120<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>0&#215;200 + 0&#215;80 + 1&#215;1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n       <\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>370<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>120<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>0<\/mn> <mo>+<\/mo> <mn>0<\/mn> <mo>+<\/mo> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>370<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>120<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd color=\"#0000ff\" fontweight=\"bold\" mathbackground=\"#ffcccc\"> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math>\r\n        <\/p>\r\n<\/div>\r\n\r\n<p>Let's look at the results for the other three coordinates.  For (200, 0):<\/p>\r\n\r\n<div class=\"equation\">\r\n    <p>\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0.9<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>-0.375<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>220<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>-0.05<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1.375<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>200<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> =  <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>0.9<\/mn><mo>&#215;<\/mo><mn>200<\/mn> <mo>+<\/mo> <mn>-0.375<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>220<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>-0.05<\/mn><mo>&#215;<\/mo><mn>200<\/mn> <mo>+<\/mo> <mn>1.375<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>20<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn><mo>&#215;<\/mo><mn>200<\/mn> <mo>+<\/mo> <mn>0<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>1<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math>  = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>400<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>10<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n        <\/p>\r\n<\/div>\r\n\r\n\r\n<p>For (0, 80) test:<\/p>\r\n\r\n<div class=\"equation\">\r\n    <p>\r\n    <math display=\"inline\">\r\n\t    <mrow>\r\n    <mo>(<\/mo>\r\n    <mtable>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>0.9<\/mn>\r\n        <\/mtd>\r\n        <mtd>\r\n          <mn>-0.375<\/mn>\r\n        <\/mtd>\r\n        <mtd>\r\n          <mn>220<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>-0.05<\/mn>\r\n        <\/mtd>\r\n        <mtd>\r\n          <mn>1.375<\/mn>\r\n        <\/mtd>\r\n        <mtd>\r\n          <mn>20<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>0<\/mn>\r\n        <\/mtd>\r\n        <mtd>\r\n          <mn>0<\/mn>\r\n        <\/mtd>\r\n        <mtd>\r\n          <mn>1<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n    <\/mtable>\r\n    <mo>)<\/mo>\r\n  <\/mrow>\r\n  <mo>&#xB7;<\/mo>\r\n  <mrow>\r\n    <mo>(<\/mo>\r\n    <mtable>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>0<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>80<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>1<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n    <\/mtable>\r\n    <mo>)<\/mo>\r\n  <\/mrow>\r\n\r\n  <mo>=<\/mo>\r\n  <mrow>\r\n    <mo>(<\/mo>\r\n    <mtable>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>0.9<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>0<\/mn>\r\n          <mo>+<\/mo>\r\n          <mn>-0.375<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>80<\/mn>\r\n          <mo>+<\/mo>\r\n          <mn>220<mn><mo>&#xD7;<\/mo><mn>1<\/mn><\/mn><\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>-0.05<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>0<\/mn>\r\n          <mo>+<\/mo>\r\n          <mn>1.375<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>80<\/mn>\r\n          <mo>+<\/mo>\r\n          <mn>20<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>1<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n      <mtr>\r\n        <mtd>\r\n          <mn>0<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>0<\/mn>\r\n          <mo>+<\/mo>\r\n          <mn>0<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>80<\/mn>\r\n          <mo>+<\/mo>\r\n          <mn>1<\/mn>\r\n          <mo>&#xD7;<\/mo>\r\n          <mn>1<\/mn>\r\n        <\/mtd>\r\n      <\/mtr>\r\n    <\/mtable>\r\n    <mo>)<\/mo>\r\n  <\/mrow>\r\n<mo>=<\/mo>\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>190<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>130<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n        <\/p>\r\n<\/div>\r\n\r\n\r\n\r\n<p>And finally, for (0, 0):<\/p>\r\n\r\n<div class=\"equation\">\r\n    <p>\r\n    <math display=\"inline\">\r\n\t  <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0.9<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>-0.375<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>220<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>-0.05<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1.375<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>20<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n\t<\/math>\r\n\t&middot;\r\n\t<math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>  \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> =  <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>0.9<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>-0.375<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>220<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>-0.05<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>1.375<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>20<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>0<\/mn><mo>&#215;<\/mo><mn>0<\/mn> <mo>+<\/mo> <mn>1<\/mn><mo>&#215;<\/mo><mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math>  = <math display=\"inline\">\t\r\n\t\t<mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr >\r\n\t\t      <mtd> <mn>220<\/mn> <\/mtd>\r\n\t\t     \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>20<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      \r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow> \r\n\t<\/math> \r\n        <\/p>\r\n<\/div>\r\n\r\n<p>Here is the result:<\/p>\r\n\r\n<div id=\"transformedExample\" class=\"exampleBackground\">\r\n       <div class=\"point top-left-pt\"><\/div>\r\n      <div class=\"point top-right-pt\"><\/div>\r\n      <div class=\"point bottom-left-pt\"><\/div>\r\n      <div class=\"point bottom-right-pt\"><\/div>\r\n      <div class=\"coord top-left\">(220, 20)<\/div>\r\n      <div class=\"coord top-right\">(400, 10)<\/div>\r\n      <div class=\"coord bottom-left\">(190, 130)<\/div>\r\n      <div class=\"coord bottom-right\">(370, 120)<\/div>\r\n   <div id=\"exampleObject2\">\r\n      \r\n   <\/div>\r\n<\/div>\r\n\r\n<p>I don't expect anyone to calculate these by hand on a regular basis (I personally don't).  But now you know what these numbers mean.  :-)<\/p>\r\n\r\n<h2>What About Internet Explorer?<\/h2>\r\n<p>Although <code>transform-origin<\/code> doesn't work with IE, it is possible to generate the matrix in another browser and use <a href=\"https:\/\/www.useragentman.com\/blog\/csssandpaper-a-css3-javascript-library\/\">cssSandpaper<\/a> to generate the shape of the transform in that browser.  In order to fix the positioning, one can use <a href=\"http:\/\/paulirish.com\/2008\/conditional-stylesheets-vs-css-hacks-answer-neither\/\">Paul Irish's conditional stylesheet fix<\/a> to position that block manually in IE only (it is what I used on this page so that the matrix transform in my example above appeared correctly in IE).  I hope to have transform-origin working in cssSandpaper soon so that it will be unnecessary to do this.<\/p>\r\n\r\n<h2>Other Interesting Facts About Matrices<\/h2>\r\n\r\n<ol>\r\n<li>All the other CSS3 transform functions have equivalent matrix notation:\r\n\r\n<table class=\"dataTable\">\r\n<thead class=\"centered\">\r\n<tr>\r\n<th>\r\nscale(a)\r\n<\/th>\r\n<th>\r\nscaleX(x)\r\n<\/th>\r\n<th>\r\nscaleY(y)\r\n<\/th>\r\n<th>translateX(x)<\/th>\r\n<th>translateY(y)<\/th>\r\n<th>translate(x,y)<\/th>\r\n\r\n\r\n\r\n\r\n<\/tr>\r\n<\/thead>\r\n\r\n<tbody class=\"centered\">\r\n<tr>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>a<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>a<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>x<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>y<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>x<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>y<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>x<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>y<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n\r\n\r\n<\/tr>\r\n<\/table>\r\n\r\n<table class=\"dataTable\">\r\n<thead class=\"centered\">\r\n<tr>\r\n<th>skewX(x)<\/th>\r\n<th>skewY(y)<\/th>\r\n<th>skew(x,y)<\/th>\r\n<th>rotate(\u03b8)<\/th>\r\n\r\n<\/tr>\r\n<\/thead>\r\n<tbody class=\"centered\">\r\n<tr>\r\n\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mo>tan<\/mo><mi>x<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mo>tan<\/mo><mi>y<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mo>tan<\/mo><mi>x<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mo>tan<\/mo><mi>y<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<td>\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mo>cos<\/mo><mi>\u03b8<\/mi> <\/mtd>\r\n\t\t      <mtd> <mo>-sin<\/mo><mi>\u03b8<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mo>sin<\/mo><mi>\u03b8<\/mi> <\/mtd>\r\n\t\t      <mtd> <mo>cos<\/mo><mi>\u03b8<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/td>\r\n<\/tr>\r\n<\/table>\r\n\r\n\r\n<\/li>\r\n\r\n<li>A list of transforms in CSS3 like this:\r\n\r\n<blockquote class=\"code\">\r\n<pre>\r\n#o1 {\r\n   transform-origin: 0px 0px;\r\n   transform: rotate(15deg) translateX(230px) scale(1.5);\r\n}\r\n<\/pre>\r\n<\/blockquote>\r\n\r\nis the same as multiplying the equivalent matrices together:\r\n\r\n<div class=\"equation\">\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mo>cos<\/mo><mi>15&#176;<\/mi> <\/mtd>\r\n\t\t      <mtd> <mo>-sin<\/mo><mi>15&#176;<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mo>sin<\/mo><mi>15&#176;<\/mi> <\/mtd>\r\n\t\t      <mtd> <mo>cos<\/mo><mi>15&#176;<\/mi> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math> &middot;\r\n<math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>230<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math> &middot; <math display=\"inline\">\r\n     <mrow>\r\n\t\t  <mo> ( <\/mo>\r\n\t\t  <mtable>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>1.5<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t    <mtr>\r\n\t\t      <mtd> <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd > <mn>0<\/mn> <\/mtd>\r\n\t\t      <mtd> <mn>1<\/mn> <\/mtd>\r\n\t\t    <\/mtr>\r\n\t\t  <\/mtable>\r\n\t\t  <mo> ) <\/mo>\r\n\t\t<\/mrow>\r\n<\/math>\r\n<\/div>\r\n\r\n(I know, I didn't tell you how to multiply matrices together. \r\n<a href=\"http:\/\/www.zweigmedia.com\/index.php?lang=en\">Stephan Waner<\/a> has written <a href=\"http:\/\/www.zweigmedia.com\/RealWorld\/tutorialsf1\/frames3_2.html\">a good tutorial for matrix multiplication<\/a> if you are interested.)<\/li>\r\n\r\n\r\n<li><strong>CSS3 2D-Transforms can only transform blocks into parallelograms<\/strong>.  For example, it is impossible to transform a block into this shape:\r\n\r\n\r\n<div id=\"transformedExample\" class=\"exampleBackground\">\r\n      <img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/01\/irregular.png\" alt=\"[Irregular Shape]\" title=\"irregular\"  \/>\r\n<\/div>\r\n\r\nIn order to do this, one must use <a href=\"http:\/\/www.w3.org\/TR\/css3-3d-transforms\/\">CSS3 3D Transforms<\/a>.  This is why the Matrix Construction Set only has three control points to drag around, not four.  If you would like to see a version of the Matrix Construction Set to use <code>matrix3d()<\/code>, please let me know by leaving a comment below.<\/li>\r\n\r\n\r\n\r\n\r\n<\/ol>\r\n\r\n<h2>In Conclusion<\/h2>\r\n\r\n<p>I don't expect anyone to be an expert in matrix artithmetic after reading this article.  But at least you know what those pesky numbers mean, and this information may become useful in the future.<\/p>\r\n\r\n<h2>Acknowledgments<\/h2>\r\n\r\n<ul>\r\n<li>The MathML markup used to display the mathematical equations in this article were rendered by <a href=\"http:\/\/www.mathjax.org\/\">MathJax<\/a>, an excellent open-source JavaScript library<\/li>\r\n<li>The equations on  <a href=\"http:\/\/www.physicsforums.com\/showthread.php?t=360963\">this Physics Forum post<\/a> was quite helpful in the creation of the Matrix Construction Set.<\/li>\r\n<li>The Matrix Construction Set uses <a href=\"http:\/\/sylvester.jcoglan.com\/\">the Sylvester JavaScript library<\/a> written by <a href=\"http:\/\/jcoglan.com\/\">James Coglan<\/a> for performing matrix calculations.  It also used my own <a href=\"https:\/\/www.useragentman.com\/blog\/2010\/01\/10\/cross-browser-html5-drag-and-drop\/\">DragDropHelpers<\/a> library to smooth out the different browser implementations of HTML5 Drag and Drop.<\/li>\r\n<li>A blog post that has a bunch of math equations on it may be scary for web designers.  My apologies.<\/li>\r\n<\/ul>\r\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2011\/01\/xx2.png\" \/> The CSS3 <code>transform<\/code> property can do some really cool things &#8211; with it, web designers can rotate, scale, skew and flip objects quite easily.  However, in order for designers to have <strong>fine-grained, pixel level control over their transforms<\/strong>, the <strong><code>matrix()<\/code> function<\/strong> is hard to beat.  This post explains what it does and the math behind the code.  It also includes a tool to help you create <code>matrix()<\/code> transforms easily using <a href=\"\/blog\/2010\/01\/10\/cross-browser-html5-drag-and-drop\/\">HTML5 Drag and Drop<\/a> for the user interface and the <a href=\"http:\/\/sylvester.jcoglan.com\/\">Sylvester JavaScript library<\/a> to do the mathematics needed to calculate the matrix values so you don&#8217;t have to (in case you have difficulties with math, or if you just are lazy and don&#8217;t want to be bothered). <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,38,60,95,41],"tags":[],"class_list":["post-2159","post","type-post","status-publish","format-standard","hentry","category-css","category-css3","category-drag-and-drop","category-math","category-transform"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=2159"}],"version-history":[{"count":53,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2159\/revisions"}],"predecessor-version":[{"id":7277,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2159\/revisions\/7277"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=2159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=2159"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=2159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}