7 files changed, 60 insertions, 9 deletions

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 83450d0f..fbe9a995 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -14,6 +14,7 @@ exports.ComponentController = Montage.create(ElementController, {
             switch(prop) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
@@ -34,6 +35,7 @@ exports.ComponentController = Montage.create(ElementController, {
             switch(p) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index 2734e226..f2c8fa2d 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -83,6 +83,8 @@ exports.StageController = Montage.create(ElementController, {
                     return el.elementModel.stageDimension.style.getProperty(p);
                 case "width":
                     return el.elementModel.stageDimension.style.getProperty(p);
+                case "-webkit-transform-style":
+                    return el.elementModel.stageView.style.getProperty(p);
                 default:
                     return ElementController.getProperty(el, p, false, true);
                     //console.log("Undefined Stage property ", p);
@@ -111,6 +113,9 @@ exports.StageController = Montage.create(ElementController, {
                     this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400;
                     el.elementModel.stageDimension.style.setProperty(p, value);
                     break;
+                case "-webkit-transform-style":
+                    el.elementModel.stageView.style.setProperty(p, value);
+                    break;
                 default:
                     console.log("Undefined property ", p, "for the Stage Controller");
             }
diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css
index 68300edf..1cdd7114 100755
--- a/js/document/templates/montage-html/default_html.css
+++ b/js/document/templates/montage-html/default_html.css
@@ -65,11 +65,6 @@ body
         display: none;
 }
 
-.global3DSettings {
-  -webkit-transform-style: preserve-3d;
-  -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-}
-
 .elem-red-outline {
   outline: red solid thin;
 }
\ No newline at end of file
diff --git a/js/document/templates/montage-html/index.html b/js/document/templates/montage-html/index.html
index edfab2b0..b3f68030 100755
--- a/js/document/templates/montage-html/index.html
+++ b/js/document/templates/montage-html/index.html
@@ -40,7 +40,7 @@
                 
                 <ninja-div id="Viewport" class="stageDimension">
                         
-                        <ninja-div id="UserContent" class="stageView stageDimension global3DSettings"></ninja-div>
+                        <ninja-div id="UserContent" class="stageView stageDimension"></ninja-div>
                         
                 </ninja-div>
 
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 782dd138..ca720ae7 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -166,9 +166,9 @@ exports.Properties = Montage.create(Component, {
                     this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
                     this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
                     this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
-                }
             }
         }
+        }
     },
 
     handleSelectionChange: {
@@ -207,6 +207,12 @@ exports.Properties = Montage.create(Component, {
                 this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
             }
 
+            if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") {
+                this.threeD.flatten = false;
+            } else {
+                this.threeD.flatten = true;
+            }
+
             if(this.customPi !== stage.elementModel.pi) {
                 // We need to unregister color chips from the previous selection from the Color Model
                 var len = this.customSections.length;
@@ -271,6 +277,11 @@ exports.Properties = Montage.create(Component, {
             this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
 
+            if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") {
+                this.threeD.flatten = false;
+            } else {
+                this.threeD.flatten = true;
+            }
 
             if(this.threeD.inGlobalMode)
             {
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
index 18a7369e..b6c25baf 100755
--- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
+++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
@@ -22,7 +22,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "xAngleControl": {"@": "threeDRotX"},
                 "yAngleControl": {"@": "threeDRotY"},
                 "zAngleControl": {"@": "threeDRotZ"},
-                "axisModeGroupControl": {"@": "axisModeGroup"}
+                "axisModeGroupControl": {"@": "axisModeGroup"},
+                "flattenControl": {"@": "flattenCheckbox"}
             }
         },
 
@@ -242,6 +243,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "value": "Global",
                 "group": {"@": "axisModeGroup"}
             }
+        },
+        "flattenCheckbox": {
+            "module": "montage/ui/checkbox.reel",
+            "name": "Checkbox",
+            "properties": {
+                "element": {"#": "flattenCh"},
+                "identifier": "flatten",
+                "checked": false
+            },
+            "bindings": {
+                "checked": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "flatten",
+                    "oneway": false
+                }
+            },
+            "listeners": [
+                {
+                    "type": "action",
+                    "listener": {"@": "owner"},
+                    "capture": false
+                }
+            ]
         }
     }
     </script>
@@ -335,7 +359,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
         <article class="fieldRow oneCol checkbox">
             <div>
                 <div class="inputField">
-                    <input class="nj-skinned" type="checkbox" />
+                    <input id="flattenCh" class="nj-skinned" type="checkbox" />
                 </div>
                 <div>
                     <label> Flatten</label>
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
index 35591afa..0d3d111d 100755
--- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
+++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
@@ -79,6 +79,10 @@ exports.ThreeD = Montage.create(Component, {
         value: 0
     },
 
+    flatten: {
+        value: false
+    },
+
     _disableTranslation: {
         value: true
     },
@@ -107,6 +111,16 @@ exports.ThreeD = Montage.create(Component, {