Added interactive example for

Will Bamberg · Will Bamberg · commit 7828bfbc7533 · 2017-03-01T14:10:55.000-08:00
diff --git a/editable-samples/pages/transform/css/element.css b/editable-samples/pages/transform/css/element.css
@@ -0,0 +1,6 @@
+#example-element {
+  max-width: 80%;
+  max-height: 80%;
+  display: block;
+  margin: 1em auto 0 auto;
+}
diff --git a/editable-samples/pages/transform/img/firefox.png b/editable-samples/pages/transform/img/firefox.png
diff --git a/editable-samples/pages/transform/index.html b/editable-samples/pages/transform/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="../../css/editable.css" rel="stylesheet"></link>
+
+    <link  href="../../codemirror/lib/codemirror.css" rel="stylesheet">
+    <link href="../../codemirror/theme/mdn-like.css" rel="stylesheet"></link>
+    <link href="../../codemirror/addon/hint/show-hint.css" rel="stylesheet"></link>
+
+    <link href="css/element.css" rel="stylesheet"></link>
+  </head>
+
+  <body>
+    <div id="output">
+      <img id="example-element" src="img/firefox.png"/>
+    </div>
+
+    <div id="buttons">
+      <input id="edit" type="button" value="Edit CSS" />
+      <input id="reset" type="button" value="Reset" />
+    </div>
+
+    <script src="../../codemirror/lib/codemirror.js"></script>
+    <script src="../../codemirror/mode/css/css.js"></script>
+    <script src="../../codemirror/addon/hint/css-hint.js"></script>
+    <script src="../../codemirror/addon/hint/show-hint.js"></script>
+  
+    <script src="js/transform.js"></script>
+    <script type="text/javascript" src="../../js/editable.js"></script>
+
+</body>
+
+</html>
diff --git a/editable-samples/pages/transform/js/transform.js b/editable-samples/pages/transform/js/transform.js
@@ -0,0 +1,12 @@
+var cmInitContent = 'transform: skew(30deg, 20deg);';
+
+var cmMatchToShowCompletions = "transform: ";
+
+var cmCompletionChoices = [
+  'scale(2, 0.5)',
+  'rotate(0.5turn)',
+  'skew(30deg, 20deg)',
+  'translateX(12em)',
+  'matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)',
+  'translateX(100px) rotate(180deg) skew(30deg, 20deg)'
+];
