Added example on how to apply 'transform-origin'.

Author: dirkschulze

css3-transforms/ChangeLog

@@ -1,3 +1,6 @@
+2012-04-25 dschulze@adobe.com
+    Added example on how to apply 'transform-origin'.
+
 2012-04-25 dschulze@adobe.com
     Update "Status of this document" to use FX TF template.
 

css3-transforms/Overview.html

@@ -588,6 +588,26 @@ <h2 id=transform-rendering><span class=secno>5. </span>The Transform
     src=transform1.png></div>
   </div>
 
+  <div class=example>
+   <pre>div {
+    height: 100px; width: 100px;
+    transform-origin: 50px 50px;
+    transform: rotate(45deg);
+}
+</pre>
+
+   <p>The &lsquo;<a href="#transform-origin"><code
+    class=property>transform-origin</code></a>&rsquo; property moves the
+    point of origin by 50 pixels in both the X and Y directions. The
+    transform rotates the element clockwise by 45° about the point of
+    origin. After all transform functions were applied, the translation of
+    the origin gets translated back by -50 pixels in both the X and Y
+    directions.</p>
+
+   <div class=figure><img alt="The point of origin gets translated temporary"
+    height=250 src=origin1.svg width=735></div>
+  </div>
+
   <div class=example>
    <pre>
 div {

css3-transforms/Transforms.src.html

@@ -292,6 +292,23 @@ <h2 id="transform-rendering">The Transform Rendering Model</h2>
                   <img src="transform1.png" alt="The 100px translation in X and Y">
                 </div>
               </div>
+              
+              <div class="example">
+<pre>div {
+    height: 100px; width: 100px;
+    transform-origin: 50px 50px;
+    transform: rotate(45deg);
+}
+</pre>
+
+                 <p>The 'transform-origin' property moves the point of origin by 50 pixels in 
+                 both the X and Y directions. The transform rotates the element
+                 clockwise by 45° about the point of origin. After all
+                 transform functions were applied, the translation of the origin gets
+                 translated back by -50 pixels in both the X and Y directions.</p>
+
+                 <div class="figure"><img alt="The point of origin gets translated temporary" src="origin1.svg" width="735" height="250"></div>
+              </div>
 
               <div class="example">
 <pre>