5 files changed, 87 insertions, 57 deletions

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 260ee8a0..d902e4a1 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -16,6 +16,7 @@ exports.ComponentController = Montage.create(ElementController, {
             switch(prop) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
@@ -38,6 +39,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/element-controller.js b/js/controllers/elements/element-controller.js
index efb33292..fda3a3c5 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -228,11 +228,10 @@ exports.ElementController = Montage.create(Component, {
 
                 if (el)
                 {
-                    var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform");
-                    if (xformStr)
-                        mat = this.transformStringToMat( xformStr );
-                    if (!mat)
+                    mat = this.application.ninja.stylesController.getMatrixFromElement(el, false);
+                    if (!mat) {
                         mat = Matrix.I(4);
+                    }
                 }
 
                 el.elementModel.props3D.matrix3d = mat;
@@ -249,23 +248,9 @@ exports.ElementController = Montage.create(Component, {
             }
             else
             {
-                var dist = 1400;
-
-                var str = this.getProperty(el, "-webkit-transform");
-                if (str)
-                {
-                    var index1 = str.indexOf( "perspective(");
-                    if (index1 >= 0)
-                    {
-                        index1 += 12;    // do not include 'perspective('
-                        var index2 = str.indexOf( ")", index1 );
-                        if (index2 >= 0)
-                        {
-                            var substr = str.substr( index1, (index2-index1));
-                            if (substr && (substr.length > 0))
-                                dist = MathUtils.styleToNumber( substr );
-                        }
-                    }
+                var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false);
+                if(dist == null) {
+                    dist = 1400;
                 }
 
                 el.elementModel.props3D.perspectiveDist = dist;
@@ -308,36 +293,6 @@ exports.ElementController = Montage.create(Component, {
                 elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]);
             }
         }
-    },
-
-    transformStringToMat: {
-        value: function( str )    {
-            var rtnMat;
-
-            var index1 = str.indexOf( "matrix3d(");
-            if (index1 >= 0)
-            {
-                index1 += 9;    // do not include 'matrix3d('
-                var index2 = str.indexOf( ")", index1 );
-                if (index2 >= 0)
-                {
-                    var substr = str.substr( index1, (index2-index1));
-                    if (substr && (substr.length > 0))
-                    {
-                        var numArray = substr.split(',');
-                        var nNums = numArray.length;
-                        if (nNums == 16)
-                        {
-                            // gl-matrix wants row order
-                            rtnMat = numArray;
-                            for (var i=0;  i<16;  i++)
-                                rtnMat[i] = Number( rtnMat[i] );
-                        }
-                    }
-                }
-            }
-
-            return rtnMat;
-        }
     }
+
 });
\ No newline at end of file
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index f9b63942..b97d04b0 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -627,6 +627,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                 world = new World(el, true);
                 el.elementModel.shapeModel.GLWorld = world;
                 el.elementModel.shapeModel.useWebGl = true;
+                                el.elementModel.controller.setProperty(el, "-webkit-transform-style", "preserve-3d");
                 world.importJSON(worldData);
                 el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot();
                 }
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index 97ea3aa5..dc916b1a 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -83,6 +83,12 @@ 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":
+                    if(el.id === "Viewport") {
+                        return this.application.ninja.stylesController.getElementStyle(el, p, false, true);
+                    } else {
+                        return el.elementModel.stageView.style.getProperty(p);
+                    }
                 default:
                     return ElementController.getProperty(el, p, false, true);
                     //console.log("Undefined Stage property ", p);
@@ -111,6 +117,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");
             }
@@ -143,11 +152,10 @@ exports.StageController = Montage.create(ElementController, {
 
                 if (el)
                 {
-                    var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform");
-                    if (xformStr)
-                        mat = this.transformStringToMat( xformStr );
-                    if (!mat)
+                    mat = this.application.ninja.stylesController.getMatrixFromElement(el, true);
+                    if (!mat) {
                         mat = Matrix.I(4);
+                    }
 
                     var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom");
                     if (zoom)
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index addfc24e..5d5f27ba 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -836,7 +836,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// For a given CSSKeyframesRule, we may add styles to the keyframe at
     ///// given index.
 
-    setKeyframeStyle : {
+    setKeyframeStyles : {
         value : function(rule, keyframeIndex, property, value, useImportant) {
             return this.setStyles(rule.cssRules[keyframeIndex], property, value, useImportant);
         }
@@ -1124,6 +1124,70 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         }
     },
 
+    ///// Get Matrix From Element
+    ///// Returns the matrix from an element's -webkit-transform
+    //// TODO - This routine should eventually check for other transform styles, i.e., rotateX, translateZ, etc.
+
+    getMatrixFromElement : {
+        value: function(element, isStage) {
+            var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage),
+                mat;
+
+            if (xformStr) {
+                var index1 = xformStr.indexOf( "matrix3d(");
+                if (index1 >= 0) {
+                    index1 += 9;    // do not include 'matrix3d('
+                    var index2 = xformStr.indexOf( ")", index1 );
+                    if (index2 >= 0) {
+                        var substr = xformStr.substr( index1, (index2-index1));
+                        if (substr && (substr.length > 0)) {
+                            var numArray = substr.split(',');
+                            var nNums = numArray.length;
+                            if (nNums == 16) {
+                                // gl