diff --git a/build/parser/bodymovin_parser.jsx b/build/parser/bodymovin_parser.jsx
index a953628..7ff4b47 100644
--- a/build/parser/bodymovin_parser.jsx
+++ b/build/parser/bodymovin_parser.jsx
@@ -579,7 +579,7 @@
             var layerInfo = pendingItem.lInfo;
             var frameRate = pendingItem.frameRate;
             var lType = extrasInstance.layerType(layerInfo);
-            if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
+            if(lType == 'AudioLayer' || layerInfo.enabled == false){
                 //TODO add audios
                 layerOb.enabled = false;
                 analyzeNextLayer();
@@ -598,7 +598,7 @@
 
             EffectsParser.createEffects(layerInfo,layerOb);
 
-            if(layerInfo.mask.numProperties>0){
+            if(layerInfo.mask && layerInfo.mask.numProperties>0){
                 setMasks(layerInfo.mask,layerOb);
                 layerOb.hasMask = true;
             }
@@ -640,10 +640,28 @@
             }else{
                 layerOb.ks.o = extrasInstance.roundNumber(layerInfo.transform.opacity.valueAtTime(0,false),3);
             }
-            if(layerInfo.transform.rotation.numKeys>1){
-                extrasInstance.convertToBezierValues(layerInfo.transform.rotation, frameRate, layerOb.ks,'r');
+            if(layerInfo.transform.rotation){
+                if(layerInfo.transform.rotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.rotation, frameRate, layerOb.ks,'r');
+                }else{
+                    layerOb.ks.r = extrasInstance.roundNumber(layerInfo.transform.rotation.valueAtTime(0,false),3);
+                }
             }else{
-                layerOb.ks.r = extrasInstance.roundNumber(layerInfo.transform.rotation.valueAtTime(0,false),3);
+                if(layerInfo.transform.xRotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.xRotation, frameRate, layerOb.ks,'rx');
+                }else{
+                    layerOb.ks.rx = extrasInstance.roundNumber(layerInfo.transform.xRotation.valueAtTime(0,false),3);
+                }
+                if(layerInfo.transform.yRotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.yRotation, frameRate, layerOb.ks,'ry');
+                }else{
+                    layerOb.ks.ry = extrasInstance.roundNumber(layerInfo.transform.yRotation.valueAtTime(0,false),3);
+                }
+                if(layerInfo.transform.zRotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.zRotation, frameRate, layerOb.ks,'rz');
+                }else{
+                    layerOb.ks.rz = extrasInstance.roundNumber(layerInfo.transform.zRotation.valueAtTime(0,false),3);
+                }
             }
             if(layerInfo.transform.position.numKeys>1){
                 extrasInstance.convertToBezierValues(layerInfo.transform.position, frameRate, layerOb.ks,'p');
@@ -820,14 +838,18 @@
         adjustNextHelperSpeed();
     }
 
-    function createLayers(compo, layersData, frameRate){
+    function createLayers(compo, layersData, frameRate,isMain){
         var i, len = compo.layers.length;
         for(i = 0;i<len;i++){
             var layerOb = {};
             var layerInfo = compo.layers[i+1];
             var lType = extrasInstance.layerType(layerInfo);
             layersData.push(layerOb);
-            if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
+            if(lType == 'CameraLayer' && isMain){
+                layerOb.isCamera = true;
+                layerOb.pe = layerInfo.property('Camera Options').property('Zoom').value;
+            }
+            if(lType == 'AudioLayer' || (lType == 'CameraLayer' && !isMain) || layerInfo.enabled == false){
                 //TODO add audios
                 layerOb.enabled = false;
                 continue;
@@ -835,7 +857,7 @@
             pendingLayers.push({lInfo:layerInfo,lOb:layerOb,frameRate:frameRate});
             if(lType=='PreCompLayer'){
                 layerOb.layers = [];
-                createLayers(layerInfo.source,layerOb.layers,layerInfo.source.frameRate);
+                createLayers(layerInfo.source,layerOb.layers,layerInfo.source.frameRate,false);
             }
 
         }
@@ -852,12 +874,12 @@
         return {width:0,height:0};
     }
 
-    function traverseAnimation(compo,layersData, frameNum, time){
+    function traverseAnimation(compo,layersData, frameNum, time, isMain){
         var i, len = compo.layers.length;
         for(i = 0;i<len;i++){
             var layerInfo = compo.layers[i+1];
             var lType = extrasInstance.layerType(layerInfo);
-            if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
+            if(lType == 'AudioLayer' || (lType == 'CameraLayer' && !isMain) || layerInfo.enabled == false){
                 //TODO add audios
                 continue;
             }
@@ -913,7 +935,7 @@
             }
             if(lType == 'PreCompLayer'){
                 var compoInTime = -layerInfo.startTime;
-                traverseAnimation(layerInfo.source,layerOb.layers, frameNum, time+compoInTime);
+                traverseAnimation(layerInfo.source,layerOb.layers, frameNum, time+compoInTime, false);
             }
             //THIS IS REPLACED WITH THE KEYFRAMES. LEAVE THIS FOR NOW.
             /*if(layerOb.lastData.an == null || extrasInstance.compareObjects(animData,layerOb.lastData.an)==false){
@@ -925,7 +947,7 @@
     }
 
     function iterateComposition(){
-        createLayers(mainComp, mainLayers, mainComp.frameRate);
+        createLayers(mainComp, mainLayers, mainComp.frameRate,true);
         // TO TRAVERSE LAYER BY LAYER. NEEDED FOR TIME REMAP?
         /*renderCompo(mainComp, mainLayers);
          AssetsManager.createAssetsDataForExport();
@@ -1056,7 +1078,7 @@
     function renderFrame(){
         currentTime = (currentRenderFrame+firstFrame)/frameRate;
         zCount = 0;
-        traverseAnimation(mainComp,mainLayers, currentRenderFrame,currentTime);
+        traverseAnimation(mainComp,mainLayers, currentRenderFrame,currentTime,true);
     }
 
     function setCallback(cb){
@@ -1078,7 +1100,7 @@
     var registeredEffects = {};
 
     function createEffects(layerInfo,layerOb){
-        if(layerInfo.effect.numProperties>0){
+        if(layerInfo.effect && layerInfo.effect.numProperties>0){
             layerOb.eff = [];
             var i, len = layerInfo.effect.numProperties, name;
             for(i=0;i<len;i++){
diff --git a/parser/DOMAnimationManager.js b/parser/DOMAnimationManager.js
index 4f67c36..aba8a3d 100644
--- a/parser/DOMAnimationManager.js
+++ b/parser/DOMAnimationManager.js
@@ -170,7 +170,7 @@
             var layerInfo = pendingItem.lInfo;
             var frameRate = pendingItem.frameRate;
             var lType = extrasInstance.layerType(layerInfo);
-            if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
+            if(lType == 'AudioLayer' || layerInfo.enabled == false){
                 //TODO add audios
                 layerOb.enabled = false;
                 analyzeNextLayer();
@@ -189,7 +189,7 @@
 
             EffectsParser.createEffects(layerInfo,layerOb);
 
-            if(layerInfo.mask.numProperties>0){
+            if(layerInfo.mask && layerInfo.mask.numProperties>0){
                 setMasks(layerInfo.mask,layerOb);
                 layerOb.hasMask = true;
             }
@@ -231,10 +231,28 @@
             }else{
                 layerOb.ks.o = extrasInstance.roundNumber(layerInfo.transform.opacity.valueAtTime(0,false),3);
             }
-            if(layerInfo.transform.rotation.numKeys>1){
-                extrasInstance.convertToBezierValues(layerInfo.transform.rotation, frameRate, layerOb.ks,'r');
+            if(layerInfo.transform.rotation){
+                if(layerInfo.transform.rotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.rotation, frameRate, layerOb.ks,'r');
+                }else{
+                    layerOb.ks.r = extrasInstance.roundNumber(layerInfo.transform.rotation.valueAtTime(0,false),3);
+                }
             }else{
-                layerOb.ks.r = extrasInstance.roundNumber(layerInfo.transform.rotation.valueAtTime(0,false),3);
+                if(layerInfo.transform.xRotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.xRotation, frameRate, layerOb.ks,'rx');
+                }else{
+                    layerOb.ks.rx = extrasInstance.roundNumber(layerInfo.transform.xRotation.valueAtTime(0,false),3);
+                }
+                if(layerInfo.transform.yRotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.yRotation, frameRate, layerOb.ks,'ry');
+                }else{
+                    layerOb.ks.ry = extrasInstance.roundNumber(layerInfo.transform.yRotation.valueAtTime(0,false),3);
+                }
+                if(layerInfo.transform.zRotation.numKeys>1){
+                    extrasInstance.convertToBezierValues(layerInfo.transform.zRotation, frameRate, layerOb.ks,'rz');
+                }else{
+                    layerOb.ks.rz = extrasInstance.roundNumber(layerInfo.transform.zRotation.valueAtTime(0,false),3);
+                }
             }
             if(layerInfo.transform.position.numKeys>1){
                 extrasInstance.convertToBezierValues(layerInfo.transform.position, frameRate, layerOb.ks,'p');
@@ -411,14 +429,18 @@
         adjustNextHelperSpeed();
     }
 
-    function createLayers(compo, layersData, frameRate){
+    function createLayers(compo, layersData, frameRate,isMain){
         var i, len = compo.layers.length;
         for(i = 0;i<len;i++){
             var layerOb = {};
             var layerInfo = compo.layers[i+1];
             var lType = extrasInstance.layerType(layerInfo);
             layersData.push(layerOb);
-            if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
+            if(lType == 'CameraLayer' && isMain){
+                layerOb.isCamera = true;
+                layerOb.pe = layerInfo.property('Camera Options').property('Zoom').value;
+            }
+            if(lType == 'AudioLayer' || (lType == 'CameraLayer' && !isMain) || layerInfo.enabled == false){
                 //TODO add audios
                 layerOb.enabled = false;
                 continue;
@@ -426,7 +448,7 @@
             pendingLayers.push({lInfo:layerInfo,lOb:layerOb,frameRate:frameRate});
             if(lType=='PreCompLayer'){
                 layerOb.layers = [];
-                createLayers(layerInfo.source,layerOb.layers,layerInfo.source.frameRate);
+                createLayers(layerInfo.source,layerOb.layers,layerInfo.source.frameRate,false);
             }
 
         }
@@ -443,12 +465,12 @@
         return {width:0,height:0};
     }
 
-    function traverseAnimation(compo,layersData, frameNum, time){
+    function traverseAnimation(compo,layersData, frameNum, time, isMain){
         var i, len = compo.layers.length;
         for(i = 0;i<len;i++){
             var layerInfo = compo.layers[i+1];
             var lType = extrasInstance.layerType(layerInfo);
-            if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
+            if(lType == 'AudioLayer' || (lType == 'CameraLayer' && !isMain) || layerInfo.enabled == false){
                 //TODO add audios
                 continue;
             }
@@ -504,7 +526,7 @@
             }
             if(lType == 'PreCompLayer'){
                 var compoInTime = -layerInfo.startTime;
-                traverseAnimation(layerInfo.source,layerOb.layers, frameNum, time+compoInTime);
+                traverseAnimation(layerInfo.source,layerOb.layers, frameNum, time+compoInTime, false);
             }
             //THIS IS REPLACED WITH THE KEYFRAMES. LEAVE THIS FOR NOW.
             /*if(layerOb.lastData.an == null || extrasInstance.compareObjects(animData,layerOb.lastData.an)==false){
@@ -516,7 +538,7 @@
     }
 
     function iterateComposition(){
-        createLayers(mainComp, mainLayers, mainComp.frameRate);
+        createLayers(mainComp, mainLayers, mainComp.frameRate,true);
         // TO TRAVERSE LAYER BY LAYER. NEEDED FOR TIME REMAP?
         /*renderCompo(mainComp, mainLayers);
          AssetsManager.createAssetsDataForExport();
@@ -647,7 +669,7 @@
     function renderFrame(){
         currentTime = (currentRenderFrame+firstFrame)/frameRate;
         zCount = 0;
-        traverseAnimation(mainComp,mainLayers, currentRenderFrame,currentTime);
+        traverseAnimation(mainComp,mainLayers, currentRenderFrame,currentTime,true);
     }
 
     function setCallback(cb){
diff --git a/parser/EffectsParser.js b/parser/EffectsParser.js
index d625079..ed11b4b 100644
--- a/parser/EffectsParser.js
+++ b/parser/EffectsParser.js
@@ -4,7 +4,7 @@
     var registeredEffects = {};
 
     function createEffects(layerInfo,layerOb){
-        if(layerInfo.effect.numProperties>0){
+        if(layerInfo.effect && layerInfo.effect.numProperties>0){
             layerOb.eff = [];
             var i, len = layerInfo.effect.numProperties, name;
             for(i=0;i<len;i++){
diff --git a/player/index.html b/player/index.html
index a3aebe2..030e5cd 100644
--- a/player/index.html
+++ b/player/index.html
@@ -2,6 +2,7 @@
 <meta charset="UTF-8">
 <head>
     <!-- build:js bodymovin.js -->
+    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
     <script src="js/main.js"></script>
     <script src="js/3rd_party/transformation-matrix.js"></script>
     <script src="js/utils/MatrixManager.js"></script>
@@ -13,6 +14,7 @@
     <script src="js/utils/DataManager.js"></script>
     <script src="js/renderers/SVGRenderer.js"></script>
     <script src="js/renderers/CanvasRenderer.js"></script>
+    <script src="js/renderers/DOMRenderer.js"></script>
     <script src="js/mask.js"></script>
     <script src="js/elements/BaseElement.js"></script>
     <script src="js/elements/CompElement.js"></script>
@@ -29,13 +31,50 @@
     <script src="js/elements/canvasElements/CVSolidElement.js"></script>
     <script src="js/elements/canvasElements/CVTextElement.js"></script>
     <script src="js/elements/canvasElements/CVMaskElement.js"></script>
+    <script src="js/elements/domElements/DBaseElement.js"></script>
+    <script src="js/elements/domElements/DImageElement.js"></script>
+    <script src="js/elements/domElements/DShapeElement.js"></script>
+    <script src="js/elements/domElements/DSolidElement.js"></script>
+    <script src="js/elements/domElements/DCompElement.js"></script>
     <script src="js/animation/AnimationManager.js"></script>
     <script src="js/animation/AnimationItem.js"></script>
      <script src="js/module.js"></script>
+    <script src="js/3rd_party/sylvester.js"></script>
     <!-- endbuild -->
 </head>
 <body style="background-color:#666; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
-<div style="width:510px;height:676px;background-color:#000;display:inline-block" class="bodymovin" data-bm-path="exports/mcangel" data-bm-type="canvas" data-bm-loop="true" data-bm-prerender="true"></div>
-<div style="width:510px;height:676px;background-color:#000;display:inline-block" class="bodymovin" data-bm-path="exports/mcangel" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="true"></div>
+<div style="width:600px;height:795px" class="bodymovin" data-bm-path="exports/cameraComp" data-bm-type="threed" data-bm-loop="true" data-bm-prerender="true"></div>
+<script>
+    var pathsArray = [];
+    var uniquePaths = [];
+    var nanCount = 0;
+    function getUniquePaths(){
+        $.each(pathsArray, function(i, el){
+            if($.inArray(el, uniquePaths) === -1) uniquePaths.push(el);
+        });
+    }
+
+    function count() {
+        pathsArray.sort();
+
+        var current = null;
+        var cnt = 0;
+        for (var i = 0; i < pathsArray.length; i++) {
+            if (pathsArray[i] != current) {
+                if (cnt > 1) {
+                    document.write(current + ' comes --> ' + cnt + ' times<br>');
+                }
+                current = pathsArray[i];
+                cnt = 1;
+            } else {
+                cnt++;
+            }
+        }
+        if (cnt > 0) {
+            document.write(current + ' comes --> ' + cnt + ' times');
+        }
+
+    }
+</script>
 </body>
 </html>
diff --git a/player/js/3rd_party/transformation-matrix.js b/player/js/3rd_party/transformation-matrix.js
index 7378e9c..12c6ce1 100644
--- a/player/js/3rd_party/transformation-matrix.js
+++ b/player/js/3rd_party/transformation-matrix.js
@@ -27,27 +27,32 @@
  * @constructor
  */
 
-function Matrix(context) {
+function Matrix(dimension) {
 
     var me = this;
     me._t = me.transform;
+    me.dimension = dimension;
 
-    me.a = me.d = 1;
-    me.b = me.c = me.e = me.f = 0;
+    if(dimension == '2d'){
+        me.a = me.d = 1;
+        me.b = me.c = me.e = me.f = 0;
+        me.props = [1,0,0,1,0,0];
+        me.a1 = me.b1 = me.c1 = me.d1 = me.e1 = me.f1 = 0;
+    }else{
+        me.a = me.f = me.k = me.p = 1;
+        me.b = me.c = me.d = me.e = me.g = me.h = me.i = me.j = me.l = me.m = me.n = me.o = 0;
+        me.props = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
+        me.a1 = me.b1 = me.c1 = me.d1 = me.e1 = me.f1 = me.g1 = me.h1 = me.i1 = me.j1 = me.k1 = me.l1 = me.m1 = me.n1 = me.o1 = me.p1 = 0;
+    }
 
-    me.props = [1,0,0,1,0,0];
 
     me.cssParts = ['matrix(','',')'];
+    me.cssParts3d = ['matrix3d(','',')'];
 
-    me.a1 = me.b1 = me.c1 = me.d1 = me.e1 = me.f1 = 0;
-
-    me.context = context;
 
     me.cos = me.sin = 0;
 
 
-    // reset canvas transformations (if any) to enable 100% sync.
-    if (context) context.setTransform(1, 0, 0, 1, 0, 0);
 }
 Matrix.prototype = {
 
@@ -101,7 +106,11 @@
      * Short-hand to reset current matrix to an identity matrix.
      */
     reset: function() {
-        return this.setTransform(1, 0, 0, 1, 0, 0);
+        if(this.dimension == '2d'){
+            return this.setTransform(1, 0, 0, 1, 0, 0);
+        }else{
+            return this.setTransform(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        }
     },
 
     /**
@@ -118,6 +127,44 @@
     },
 
     /**
+     * Rotates current matrix accumulative by angle.
+     * @param {number} angle - angle in radians
+     */
+    rotateX: function(angle) {
+        if(angle == 0){
+            return this;
+        }
+        this.cos = Math.cos(angle);
+        this.sin = Math.sin(angle);
+        return this._t(1, 0, 0, 0
+            , 0, this.cos, -this.sin, 0
+            , 0, this.sin,  this.cos, 0
+            , 0, 0, 0, 1);
+    },
+    rotateY: function(angle) {
+        if(angle == 0){
+            return this;
+        }
+        this.cos = Math.cos(angle);
+        this.sin = Math.sin(angle);
+        return this._t(this.cos,  0,  this.sin, 0
+            , 0, 1, 0, 0
+            , -this.sin,  0,  this.cos, 0
+            , 0, 0, 0, 1);
+    },
+    rotateZ: function(angle) {
+        if(angle == 0){
+            return this;
+        }
+        this.cos = Math.cos(angle);
+        this.sin = Math.sin(angle);
+        return this._t(this.cos, -this.sin,  0, 0
+            , this.sin,  this.cos, 0, 0
+            , 0,  0,  1, 0
+            , 0, 0, 0, 1);
+    },
+
+    /**
      * Converts a vector given as x and y to angle, and
      * rotates (accumulative).
      * @param x
@@ -149,11 +196,14 @@
      * @param {number} sx - scale factor x (1 does nothing)
      * @param {number} sy - scale factor y (1 does nothing)
      */
-    scale: function(sx, sy) {
-        if(sx == 1 && sy == 1){
+    scale: function(sx, sy, sz) {
+        if(sx == 1 && sy == 1 && (sz == 1 || sz == null)){
             return this;
         }
-        return this._t(sx, 0, 0, sy, 0, 0);
+        if(this.dimension == '2d'){
+            return this._t(sx, 0, 0, sy, 0, 0);
+        }
+        return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
     },
 
     /**
@@ -161,7 +211,10 @@
      * @param {number} sx - scale factor x (1 does nothing)
      */
     scaleX: function(sx) {
-        return this._t(sx, 0, 0, 1, 0, 0);
+        if(this.dimension == '2d'){
+            return this._t(sx, 0, 0, 1, 0, 0);
+        }
+        return this._t(sx, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
     },
 
     /**
@@ -169,7 +222,18 @@
      * @param {number} sy - scale factor y (1 does nothing)
      */
     scaleY: function(sy) {
-        return this._t(1, 0, 0, sy, 0, 0);
+        if(this.dimension == '2d'){
+            return this._t(1, 0, 0, sy, 0, 0);
+        }
+        return this._t(1, 0, 0, 0, 0, sy, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    },
+
+    /**
+     * Scales current matrix on y axis accumulative.
+     * @param {number} sy - scale factor y (1 does nothing)
+     */
+    scaleZ: function(sz) {
+        return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
     },
 
     /**
@@ -231,14 +295,26 @@
      * @param {number} e - translate x
      * @param {number} f - translate y
      */
-    setTransform: function(a, b, c, d, e, f) {
+    setTransform: function(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
         this.props[0] = a;
         this.props[1] = b;
         this.props[2] = c;
         this.props[3] = d;
         this.props[4] = e;
         this.props[5] = f;
-        return this._x();
+        if(this.dimension == '3d'){
+            this.props[6] = g;
+            this.props[7] = h;
+            this.props[8] = i;
+            this.props[9] = j;
+            this.props[10] = k;
+            this.props[11] = l;
+            this.props[12] = m;
+            this.props[13] = n;
+            this.props[14] = o;
+            this.props[15] = p;
+        }
+        return this;
     },
 
     /**
@@ -246,8 +322,11 @@
      * @param {number} tx - translation for x
      * @param {number} ty - translation for y
      */
-    translate: function(tx, ty) {
-        return this._t(1, 0, 0, 1, tx, ty);
+    translate: function(tx, ty, tz) {
+        if(this.dimension == '2d'){
+            return this._t(1, 0, 0, 1, tx, ty);
+        }
+        return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);
     },
 
     /**
@@ -255,7 +334,10 @@
      * @param {number} tx - translation for x
      */
     translateX: function(tx) {
-        return this._t(1, 0, 0, 1, tx, 0);
+        if(this.dimension == '2d'){
+            return this._t(1, 0, 0, 1, tx, 0);
+        }
+        return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, 0, 0, 1);
     },
 
     /**
@@ -263,7 +345,18 @@
      * @param {number} ty - translation for y
      */
     translateY: function(ty) {
-        return this._t(1, 0, 0, 1, 0, ty);
+        if(this.dimension == '2d'){
+            return this._t(1, 0, 0, 1, 0, ty);
+        }
+        return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, ty, 0, 1);
+    },
+
+    /**
+     * Translate current matrix on z axis accumulative.
+     * @param {number} tz - translation for z
+     */
+    translateY: function(ty) {
+        return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, tz, 1);
     },
 
     /**
@@ -275,26 +368,65 @@
      * @param {number} e2 - translate x
      * @param {number} f2 - translate y
      */
-    transform: function(a2, b2, c2, d2, e2, f2) {
-
+    transform: function(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
         this.a1 = this.props[0];
         this.b1 = this.props[1];
         this.c1 = this.props[2];
         this.d1 = this.props[3];
         this.e1 = this.props[4];
         this.f1 = this.props[5];
+        if(this.dimension == '3d'){
+            this.g1 = this.props[6];
+            this.h1 = this.props[7];
+            this.i1 = this.props[8];
+            this.j1 = this.props[9];
+            this.k1 = this.props[10];
+            this.l1 = this.props[11];
+            this.m1 = this.props[12];
+            this.n1 = this.props[13];
+            this.o1 = this.props[14];
+            this.p1 = this.props[15];
+        }
 
         /* matrix order (canvas compatible):
          * ace
          * bdf
          * 001
          */
-        this.props[0] = this.a1 * a2 + this.c1 * b2;
+        if(this.dimension == '2d'){
+             this.props[0] = this.a1 * a2 + this.c1 * b2;
+             this.props[1] = this.b1 * a2 + this.d1 * b2;
+             this.props[2] = this.a1 * c2 + this.c1 * d2;
+             this.props[3] = this.b1 * c2 + this.d1 * d2;
+             this.props[4] = this.a1 * e2 + this.c1 * f2 + this.e1;
+             this.props[5] = this.b1 * e2 + this.d1 * f2 + this.f1;
+        }else{
+             this.props[0] = this.a1 * a2 + this.b1 * e2 + this.c1 * i2 + this.d1 * m2;
+             this.props[1] = this.a1 * b2 + this.b1 * f2 + this.c1 * j2 + this.d1 * n2 ;
+             this.props[2] = this.a1 * c2 + this.b1 * g2 + this.c1 * k2 + this.d1 * o2 ;
+             this.props[3] = this.a1 * d2 + this.b1 * h2 + this.c1 * l2 + this.d1 * p2 ;
+
+             this.props[4] = this.e1 * a2 + this.f1 * e2 + this.g1 * i2 + this.h1 * m2 ;
+             this.props[5] = this.e1 * b2 + this.f1 * f2 + this.g1 * j2 + this.h1 * n2 ;
+             this.props[6] = this.e1 * c2 + this.f1 * g2 + this.g1 * k2 + this.h1 * o2 ;
+             this.props[7] = this.e1 * d2 + this.f1 * h2 + this.g1 * l2 + this.h1 * p2 ;
+
+         this.props[8] = this.i1 * a2 + this.j1 * e2 + this.k1 * i2 + this.l1 * m2 ;
+         this.props[9] = this.i1 * b2 + this.j1 * f2 + this.k1 * j2 + this.l1 * n2 ;
+         this.props[10] = this.i1 * c2 + this.j1 * g2 + this.k1 * k2 + this.l1 * o2 ;
+         this.props[11] = this.i1 * d2 + this.j1 * h2 + this.k1 * l2 + this.l1 * p2 ;
+
+         this.props[12] = this.m1 * a2 + this.n1 * e2 + this.o1 * i2 + this.p1 * m2 ;
+         this.props[13] = this.m1 * b2 + this.n1 * f2 + this.o1 * j2 + this.p1 * n2 ;
+         this.props[14] = this.m1 * c2 + this.n1 * g2 + this.o1 * k2 + this.p1 * o2 ;
+         this.props[15] = this.m1 * d2 + this.n1 * h2 + this.o1 * l2 + this.p1 * p2 ;
+        }
+        /*this.props[0] = this.a1 * a2 + this.c1 * b2;
         this.props[1] = this.b1 * a2 + this.d1 * b2;
         this.props[2] = this.a1 * c2 + this.c1 * d2;
         this.props[3] = this.b1 * c2 + this.d1 * d2;
         this.props[4] = this.a1 * e2 + this.c1 * f2 + this.e1;
-        this.props[5] = this.b1 * e2 + this.d1 * f2 + this.f1;
+        this.props[5] = this.b1 * e2 + this.d1 * f2 + this.f1;*/
 
         return this._x();
     },
@@ -685,7 +817,10 @@
      * @returns {Array}
      */
     toArray: function() {
-        return [this.props[0],this.props[1],this.props[2],this.props[3],this.props[4],this.props[5]];
+        if(this.dimension == '2d'){
+            return [this.props[0],this.props[1],this.props[2],this.props[3],this.props[4],this.props[5]];
+        }
+        return [this.props[0],this.props[1],this.props[2],this.props[3],this.props[4],this.props[5],this.props[6],this.props[7],this.props[8],this.props[9],this.props[10],this.props[11],this.props[12],this.props[13],this.props[14],this.props[15]];
     },
 
     /**
@@ -693,9 +828,12 @@
      * @returns {string}
      */
     toCSS: function() {
-        this.cssParts[1] = this.props.join(',');
-        return this.cssParts.join('');
-        //return "matrix(" + this.a + ',' + this.b + ',' + this.c + ',' + this.d + ',' + this.e + ',' + this.f + ")";
+        if(this.dimension == '2d'){
+            this.cssParts[1] = this.props.join(',');
+            return this.cssParts.join('');
+        }
+        this.cssParts3d[1] = this.props.join(',');
+        return this.cssParts3d.join('');
     },
 
     /**
@@ -731,8 +869,6 @@
      * @private
      */
     _x: function() {
-        if (this.context)
-            this.context.setTransform(this.a, this.b, this.c, this.d, this.e, this.f);
         return this;
     }
 };
\ No newline at end of file
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 22a3c0c..4ab8ef2 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -42,6 +42,10 @@
             break;
         case 'svg':
             this.renderer = new SVGRenderer(this, params.renderer);
+            break;
+        case 'threed':
+            this.renderer = new DOMRenderer(this, params.renderer);
+            break;
     }
     this.animType = animType;
 
@@ -135,11 +139,13 @@
     this.checkLoaded();
 };
 
+var startTime = durationTime = 0;
 AnimationItem.prototype.checkLoaded = function () {
     this.renderer.buildStage(this.container, this.layers);
     if (this.pendingElements == 0) {
         if(this.prerenderFramesFlag){
             this.prerenderFrames(0);
+            startTime = Date.now();
             dataManager.renderFrame(this.animationID,this.currentFrame);
             this.renderer.renderFrame(this.currentFrame);
         }else{
@@ -151,12 +157,12 @@
         }
     }
 };
-
 AnimationItem.prototype.prerenderFrames = function(count){
     if(!count){
         count = 0;
     }
     if(this.renderedFrameCount === this.totalFrames){
+        durationTime = Date.now() - startTime;
         //TODO Need polyfill for ios 5.1
         this.isLoaded = true;
         this.gotoFrame();
@@ -166,7 +172,7 @@
     }else{
         dataManager.renderFrame(this.animationID,this.renderedFrameCount);
         this.renderedFrameCount+=1;
-        if(count > 5){
+        if(count > 4){
             setTimeout(this.prerenderFrames.bind(this),0);
         }else{
             count += 1;
diff --git a/player/js/elements/canvasElements/CVMaskElement.js b/player/js/elements/canvasElements/CVMaskElement.js
index 7de209f..2cd4ea8 100644
--- a/player/js/elements/canvasElements/CVMaskElement.js
+++ b/player/js/elements/canvasElements/CVMaskElement.js
@@ -17,7 +17,7 @@
     this.ctx.beginPath();
     for (i = 0; i < len; i++) {
         if (this.masksProperties[i].inv) {
-            this.createInvertedMask(this.masksProperties[i], this.frameNum);
+            this.createInvertedMask(this.ctx,this.masksProperties[i].pathVertices[this.frameNum][0]);
         } else {
             this.drawShape(this.ctx, this.data.masksProperties[i].paths[this.frameNum].pathNodes);
         }
@@ -26,6 +26,25 @@
     this.ctx.clip();
 };
 
+CVMaskElement.prototype.createInvertedMask = function (ctx, data) {
+    ctx.beginPath();
+    var w = ctx.canvas.width;
+    var h = ctx.canvas.height;
+    var j, jLen = data.v.length;
+    ctx.moveTo(0,0);
+    ctx.lineTo(w,0);
+    ctx.lineTo(w,h);
+    ctx.lineTo(0,h);
+    ctx.lineTo(0,0);
+    ctx.moveTo(data.v[0][0], data.v[0][1]);
+    for (j = 1; j < jLen; j++) {
+        ctx.bezierCurveTo(data.o[j - 1][0], data.o[j - 1][1], data.i[j][0], data.i[j][1], data.v[j][0], data.v[j][1]);
+    }
+    ctx.bezierCurveTo(data.o[j - 1][0], data.o[j - 1][1], data.i[0][0], data.i[0][1], data.v[0][0], data.v[0][1]);
+    ctx.closePath();
+    ctx.clip();
+};
+
 CVMaskElement.prototype.drawShape = function (ctx, data) {
     var j, jLen = data.v.length;
     ctx.moveTo(data.v[0][0], data.v[0][1]);
@@ -37,4 +56,4 @@
 
 CVMaskElement.prototype.createInvertedMask = function(){
 
-}
\ No newline at end of file
+}
diff --git a/player/js/elements/domElements/DBaseElement.js b/player/js/elements/domElements/DBaseElement.js
new file mode 100644
index 0000000..9f92847
--- /dev/null
+++ b/player/js/elements/domElements/DBaseElement.js
@@ -0,0 +1,158 @@
+var DBaseElement = function (data, animationItem){
+    this.animationItem = animationItem;
+    this.data = data;
+    this.transformChanged = false;
+    this.forceRender = false;
+    this.init();
+};
+
+DBaseElement.prototype.init = function(){
+    this.createElements();
+    if(this.data.hasMask){
+        this.addMasks(this.data);
+    }
+    if(this.data.eff){
+        this.createEffectsManager(this.data);
+    }
+};
+
+DBaseElement.prototype.createElements = function(){
+    this.layerElement = document.createElementNS(svgNS,'svg');
+    this.layerElement.style.position = 'absolute';
+    this.layerElement.style.top = 0;
+    this.layerElement.style.left = 0;
+    this.layerElement.style.backfaceVisibility  = this.layerElement.style.webkitBackfaceVisibility = 'hidden';
+    this.layerElement.style.transformOrigin = "0 0";
+    this.layerElement.setAttribute('id',this.data.layerName);
+
+
+    this.maskingGroup = this.layerElement;
+
+    this.maskedElement = this.layerElement;
+    this.mainElement = this.layerElement;
+
+};
+
+DBaseElement.prototype.prepareFrame = function(num){
+    this.currentAnimData = this.data.renderedData[num].an;
+    if(this.data.renderedFrame.tr !== this.currentAnimData.matrixValue){
+        this.transformChanged = true;
+        this.data.renderedFrame.tr = this.currentAnimData.matrixValue;
+    }else{
+        this.transformChanged = false;
+    }
+};
+
+DBaseElement.prototype.renderFrame = function(num){
+    if(this.data.inPoint - this.data.startTime <= num && this.data.outPoint - this.data.startTime > num)
+    {
+        if(this.isVisible !== true){
+            this.isVisible = true;
+            this.forceRender = true;
+            this.mainElement.style.opacity=1;
+        }
+    }else{
+        if(this.isVisible !== false){
+            this.isVisible = false;
+            this.mainElement.style.opacity=0;
+        }
+    }
+
+    if(this.data.eff){
+        this.effectsManager.renderFrame(num,this.currentAnimData.mk);
+    }
+
+    if(num === this.data.renderedFrame.num){
+        return this.isVisible;
+    }
+
+    if(this.data.hasMask){
+        this.maskManager.renderFrame(num);
+    }
+
+    if(this.data.renderedFrame.o !== this.currentAnimData.tr.o){
+        this.data.renderedFrame.o = this.currentAnimData.tr.o;
+        if(this.isVisible){
+            this.layerElement.style.opacity = this.currentAnimData.tr.o;
+        }
+    }
+
+    var transformValue = '';
+
+
+    if(this.data.parents){
+        var changedFlag = false;
+        var i = 0, len = this.data.parents.length, parentAnimData;
+        if(!this.transformChanged){
+            while(i<len){
+                if(this.data.parents[i].elem.element.transformChanged){
+                    changedFlag = true;
+                    break;
+                }
+                i+=1;
+            }
+        }else{
+            changedFlag = true;
+        }
+        if(changedFlag){
+            for(i=len-1;i>=0;i-=1){
+                parentAnimData = this.data.parents[i].elem.element.currentAnimData;
+                transformValue += parentAnimData.matrixValue + ' ';
+            }
+            transformValue += this.currentAnimData.matrixValue;
+            if(this.isVisible){
+                this.layerElement.style.transform = transformValue;
+            }
+            this.fullTransform = transformValue;
+        }
+    }else if(this.transformChanged){
+        transformValue += this.currentAnimData.matrixValue;
+        if(this.isVisible){
+            this.layerElement.style.transform = transformValue;
+        }
+        this.fullTransform = transformValue;
+    }
+    if(this.forceRender){
+        this.forceRender = false;
+        this.layerElement.style.opacity = this.currentAnimData.tr.o;
+        this.layerElement.style.transform = this.fullTransform;
+    }
+
+
+    return this.isVisible;
+};
+
+DBaseElement.prototype.getDomElement = function(){
+    return this.layerElement;
+};
+DBaseElement.prototype.setMainElement = function(value){
+    this.mainElement = value;
+};
+DBaseElement.prototype.getMaskManager = function(){
+    return this.maskManager;
+};
+DBaseElement.prototype.addMasks = function(data){
+    var params = {
+        'data':{value:data},
+        'element':{value:this}
+    };
+    this.maskManager = createElement(MaskElement,null,params);
+};
+DBaseElement.prototype.createEffectsManager = function(data){
+    var params = {
+        'effects':{value:data.eff},
+        'element':{value:this}
+    };
+    this.effectsManager = createElement(EffectsManager,null,params);
+};
+DBaseElement.prototype.getType = function(){
+    return this.type;
+};
+
+DBaseElement.prototype.getLayerSize = function(){
+    if(this.data.type == 'TextLayer'){
+        return {w:this.data.textData.width,h:this.data.textData.height};
+    }else{
+        return {w:this.data.width,h:this.data.height};
+    }
+};
diff --git a/player/js/elements/domElements/DCompElement.js b/player/js/elements/domElements/DCompElement.js
new file mode 100644
index 0000000..fe0be5e
--- /dev/null
+++ b/player/js/elements/domElements/DCompElement.js
@@ -0,0 +1,80 @@
+function DCompElement(data, animationItem){
+    this.layers = data.layers;
+    data.threeDComp = false;
+    this.parent.constructor.call(this,data, animationItem);
+}
+createElement(DBaseElement, DCompElement);
+
+DCompElement.prototype.createElements = function(){
+    var i = 0, len = this.layers.length;
+    while(i<len){
+        if(this.layers[i].threeD){
+            this.data.threeDComp = true;
+            break;
+        }
+        i+=1;
+    }
+    if(this.data.threeDComp){
+        this.layerElement = document.createElement('div');
+        this.layerElement.style.position = 'absolute';
+        this.layerElement.style.top = 0;
+        this.layerElement.style.left = 0;
+        this.layerElement.style.backfaceVisibility  = this.layerElement.style.webkitBackfaceVisibility = 'hidden';
+        this.layerElement.style.transformStyle = this.animationItem.container.style.webkitTransformStyle = "preserve-3d";
+        this.layerElement.style.transformOrigin = "0 0";
+        this.layerElement.setAttribute('id',this.data.layerName);
+    }else{
+        this.layerElement = document.createElement('canvas');
+        this.layerElement.style.position = 'absolute';
+        this.layerElement.style.top = 0;
+        this.layerElement.style.left = 0;
+        this.layerElement.style.backfaceVisibility  = this.layerElement.style.webkitBackfaceVisibility = 'hidden';
+        this.layerElement.style.transformStyle = this.animationItem.container.style.webkitTransformStyle = "preserve-3d";
+        this.layerElement.style.transformOrigin = "0 0";
+        this.layerElement.setAttribute('width',this.data.width);
+        this.layerElement.setAttribute('height',this.data.height);
+        this.layerElement.setAttribute('id',this.data.layerName);
+
+        var rendererParams = {
+            clearCanvas: true,
+            context: this.layerElement.getContext('2d'),
+            scaleMode: 'fit'
+        };
+        this.renderer = new CanvasRenderer(this,rendererParams);
+        this.data.compWidth = this.data.width;
+        this.data.compHeight = this.data.height;
+        this.renderer.configAnimation({animation:this.data});
+        this.renderer.buildItems(this.data.layers);
+        this.renderer.buildStage(this.layerElement, this.data.layers);
+    }
+
+
+    this.maskingGroup = this.layerElement;
+
+    this.maskedElement = this.layerElement;
+    this.mainElement = this.layerElement;
+};
+
+DCompElement.prototype.getComposingElement = function(){
+    return this.layerElement;
+};
+
+DCompElement.prototype.renderFrame = function(num){
+    var renderParent = this.parent.renderFrame.call(this,num);
+    if(renderParent===false){
+        return;
+    }
+
+    var timeRemapped = this.data.tm ? this.data.tm[num] < 0 ? 0 : this.data.tm[num] : num;
+    if(this.data.threeDComp){
+        var i,len = this.layers.length;
+        for( i = 0; i < len; i+=1 ){
+            this.layers[i].element.prepareFrame(timeRemapped - this.layers[i].startTime);
+        }
+        for( i = 0; i < len; i+=1 ){
+            this.layers[i].element.renderFrame(timeRemapped - this.layers[i].startTime);
+        }
+    }else{
+        this.renderer.renderFrame(timeRemapped)
+    }
+};
\ No newline at end of file
diff --git a/player/js/elements/domElements/DImageElement.js b/player/js/elements/domElements/DImageElement.js
new file mode 100644
index 0000000..b978d40
--- /dev/null
+++ b/player/js/elements/domElements/DImageElement.js
@@ -0,0 +1,24 @@
+function DImageElement(data, animationItem){
+    this.animationItem = animationItem;
+    this.assets = this.animationItem.getAssets();
+    this.path = this.animationItem.getPath();
+    this.parent.constructor.call(this,data, animationItem);
+}
+createElement(DBaseElement, DImageElement);
+
+DImageElement.prototype.createElements = function(){
+    console.log('innnit',this);
+
+    var self = this;
+
+    var imageLoaded = function(){
+        self.animationItem.elementLoaded();
+    };
+
+    var img = new Image();
+    img.addEventListener('load', imageLoaded, false);
+    img.src = this.path+this.assets[this.data.assetId].path;
+    this.mainElement = img;
+    styleDiv(this.mainElement);
+
+};
\ No newline at end of file
diff --git a/player/js/elements/domElements/DShapeElement.js b/player/js/elements/domElements/DShapeElement.js
new file mode 100644
index 0000000..12afb32
--- /dev/null
+++ b/player/js/elements/domElements/DShapeElement.js
@@ -0,0 +1,47 @@
+function DShapeElement(data, animationItem){
+    this.shapes = [];
+    this.parent.constructor.call(this,data, animationItem);
+}
+createElement(DBaseElement, DShapeElement);
+
+DShapeElement.prototype.createElements = function(){
+    //TODO check if I can use symbol so i can set its viewBox
+
+    this.parent.createElements.call(this);
+
+    this.layerElement.setAttribute('width',2000);
+    this.layerElement.setAttribute('height',2000);
+    this.layerElement.setAttribute('viewBox',-this.data.compWidth/2 + ' '+ -this.data.compHeight/2+' '+2000+' '+2000);
+    this.layerElement.setAttribute('preserveAspectRatio','xMidYMid meet');
+
+    var i, len = this.data.shapes.length;
+    var shapeItem;
+    for(i=len-1;i>=0;i--){
+        if(this.data.trim){
+            this.data.shapes[i].trim = this.data.trim;
+        }
+        shapeItem = new ShapeItemElement(this.data.shapes[i]);
+        this.layerElement.appendChild(shapeItem.getElement());
+        this.shapes.push(shapeItem);
+    }
+};
+
+DShapeElement.prototype.renderFrame = function(num){
+    var renderParent = this.parent.renderFrame.call(this,num);
+    this.layerElement.style.transform = this.fullTransform + ' translate('+ -this.data.compWidth/2 +'px, '+ -this.data.compHeight/2 +'px )';
+    if(renderParent===false){
+        return;
+    }
+
+    this.renderShapes(num);
+};
+
+DShapeElement.prototype.renderShapes = function(num){
+    var i,len = this.data.shapes.length,shapeData;
+    var shapeItem;
+    for(i=len-1;i>=0;i--){
+        shapeData = this.data.shapes[i];
+        shapeItem = this.shapes[len - 1 - i];
+        shapeItem.renderShape(num);
+    }
+};
\ No newline at end of file
diff --git a/player/js/elements/domElements/DSolidElement.js b/player/js/elements/domElements/DSolidElement.js
new file mode 100644
index 0000000..abec891
--- /dev/null
+++ b/player/js/elements/domElements/DSolidElement.js
@@ -0,0 +1,19 @@
+function DSolidElement(data, animationItem){
+    this.parent.constructor.call(this,data, animationItem);
+}
+createElement(DBaseElement, DSolidElement);
+
+DSolidElement.prototype.createElements = function(){
+    this.parent.createElements.call(this);
+    this.layerElement.setAttribute('width',this.data.width);
+    this.layerElement.setAttribute('height',this.data.height);
+    var rect = document.createElementNS(svgNS,'rect');
+    rect.setAttribute('width',this.data.width);
+    rect.setAttribute('height',this.data.height);
+    rect.setAttribute('fill',this.data.color);
+    this.layerElement.appendChild(rect);
+    styleUnselectableDiv(rect);
+
+    this.maskingGroup = this.svgElem;
+    this.maskedElement = rect;
+};
\ No newline at end of file
diff --git a/player/js/module.js b/player/js/module.js
index eb768bf..5708e5c 100644
--- a/player/js/module.js
+++ b/player/js/module.js
@@ -63,7 +63,8 @@
     function checkReady(){
         if (document.readyState === "complete") {
             clearInterval(readyStateCheckInterval);
-                searchAnimations();
+            setTimeout(searchAnimations,3000);
+                //searchAnimations();
         }
     }
 
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 3d391fb..044f319 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -27,7 +27,7 @@
             console.log('NO TYPE: ',layers[i]);
         }
     }
-}
+};
 
 CanvasRenderer.prototype.createBase = function (data) {
     data.element = new CVBaseElement(data, this);
diff --git a/player/js/renderers/DOMRenderer.js b/player/js/renderers/DOMRenderer.js
new file mode 100644
index 0000000..2fad1b6
--- /dev/null
+++ b/player/js/renderers/DOMRenderer.js
@@ -0,0 +1,127 @@
+function DOMRenderer(animationItem){
+    this.animationItem = animationItem;
+    this.layers = null;
+    this.camera = null;
+}
+
+DOMRenderer.prototype.buildItems = function(layers){
+    var count = 0, i, len = layers.length;
+    for (i = 0; i < len; i++) {
+        if (layers[i].type == 'StillLayer') {
+            count++;
+            this.createImage(layers[i]);
+        } else if (layers[i].type == 'PreCompLayer') {
+            this.createComp(layers[i]);
+        } else if (layers[i].type == 'SolidLayer') {
+            this.createSolid(layers[i]);
+        } else if (layers[i].type == 'ShapeLayer') {
+            this.createShape(layers[i]);
+        } else if (layers[i].type == 'TextLayer') {
+            this.createText(layers[i]);
+        } else{
+            this.createBase(layers[i]);
+            //console.log('NO TYPE: ',layers[i]);
+        }
+    }
+};
+
+DOMRenderer.prototype.createBase = function (data) {
+    data.element = new DBaseElement(data, this);
+};
+
+DOMRenderer.prototype.createShape = function (data) {
+    data.element = new DShapeElement(data, this.animationItem);
+};
+
+DOMRenderer.prototype.createText = function (data) {
+    data.element = new DTextElement(data, this.animationItem);
+};
+
+DOMRenderer.prototype.createImage = function (data) {
+    data.element = new DImageElement(data, this.animationItem);
+};
+
+DOMRenderer.prototype.createComp = function (data) {
+    data.element = new DCompElement(data, this.animationItem);
+    if(data.threeDComp){
+        this.buildItems(data.layers);
+    }
+};
+
+DOMRenderer.prototype.createSolid = function (data) {
+    data.element = new DSolidElement(data, this.animationItem);
+};
+
+DOMRenderer.prototype.configAnimation = function(animData){
+    this.layers = animData.animation.layers;
+    var i = 0, len = this.layers.length;
+    while(i<len){
+        if(this.layers[i].type == 'CameraLayer'){
+            this.camera = this.layers[i];
+            break;
+        }
+        i += 1;
+    }
+    this.animationItem.wrapper.style.overflow = 'hidden';
+    this.animationItem.wrapper.style.perspective = this.camera.pe+'px';
+    this.animationItem.wrapper.style.transformStyle = this.animationItem.wrapper.style.webkitTransformStyle = "preserve-3d";
+    this.animationItem.wrapper.style.transformOrigin = this.animationItem.wrapper.style.mozTransformOrigin = this.animationItem.wrapper.style.webkitTransformOrigin = this.animationItem.wrapper.style['-webkit-transform'] = "0 0 0";
+    this.animationItem.container = document.createElement('div');
+    this.animationItem.container.style.transformOrigin = this.animationItem.container.style.mozTransformOrigin = this.animationItem.container.style.webkitTransformOrigin = this.animationItem.container.style['-webkit-transform'] = "450px 275px "+this.camera.pe+"px";
+    this.animationItem.container.style.transformStyle = this.animationItem.container.style.webkitTransformStyle = "preserve-3d";
+    this.animationItem.container.style.transform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
+    this.animationItem.container.style.position = 'absolute';
+    this.animationItem.container.style.backfaceVisibility  = this.animationItem.container.style.webkitBackfaceVisibility = 'hidden';
+    this.animationItem.container.style.top = 0;
+    this.animationItem.container.style.left = 0;
+    this.animationItem.wrapper.appendChild(this.animationItem.container);
+};
+
+DOMRenderer.prototype.buildStage = function (container, layers) {
+    var i, len = layers.length, layerData;
+    for (i = len - 1; i >= 0; i--) {
+        layerData = layers[i];
+        if (layerData.parent) {
+            layerData.parentHierarchy = [];
+            this.buildItemHierarchy(layerData, layers, layerData.parent);
+        }
+        if (layerData.type == 'PreCompLayer' && layerData.threeDComp) {
+            this.buildStage(layerData.element.getComposingElement(), layerData.layers);
+        }
+        container.appendChild(layerData.element.mainElement);
+    }
+};
+
+DOMRenderer.prototype.buildItemHierarchy = function (threeItem, layers, parentName) {
+    var i = 0, len = layers.length;
+    while (i < len) {
+        if (layers[i].layerName == parentName) {
+            threeItem.parentHierarchy.push(layers[i]);
+            if (layers[i].parent == undefined) {
+            } else {
+                this.buildItemHierarchy(threeItem, layers, layers[i].parent);
+            }
+            break;
+        }
+        i += 1;
+    }
+};
+
+DOMRenderer.prototype.updateContainerSize = function () {
+};
+
+DOMRenderer.prototype.renderCamera = function(num){
+    //this.camera.prepareFrame(num - this.camera.startTime);
+    this.animationItem.container.style.transform = this.camera.element.currentAnimData.cameraValue;
+};
+
+DOMRenderer.prototype.renderFrame = function(num){
+    var i, len = this.layers.length;
+    for (i = 0; i < len; i++) {
+        this.layers[i].element.prepareFrame(num - this.layers[i].startTime);
+    }
+    for (i = 0; i < len; i++) {
+        this.layers[i].element.renderFrame(num - this.layers[i].startTime);
+    }
+    this.renderCamera(num);
+};
\ No newline at end of file
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index ff7e0eb..886f746 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -38,7 +38,7 @@
 
 SVGRenderer.prototype.createComp = function (data) {
     data.element = new ICompElement(data, this.animationItem);
-    this.buildItems(data.layers, data.element.getType());
+    this.buildItems(data.layers);
 };
 
 SVGRenderer.prototype.createSolid = function (data) {
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index 920af5c..23d0c30 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -38,7 +38,7 @@
         }
     }
 
-    function completeLayers(layers){
+    function completeLayers(layers, compWidth,compHeight){
         var layerFrames, offsetFrame, layerData;
         var animArray, lastFrame;
         var shapeItem;
@@ -46,6 +46,8 @@
         var j, jLen, k, kLen;
         for(i=0;i<len;i+=1){
             layerData = layers[i];
+            layerData.compWidth = compWidth;
+            layerData.compHeight = compHeight;
             layerFrames = layerData.outPoint - layerData.startTime;
             offsetFrame = layerData.startTime;
             layerData.layerName = convertLayerNameToID(layerData.layerName);
@@ -74,6 +76,21 @@
             }else{
                 layerData.ks.r *= degToRads;
             }
+            if(layerData.ks.rx instanceof Array){
+                convertNumericValue(layerData.ks.rx,degToRads);
+            }else{
+                layerData.ks.rx *= degToRads;
+            }
+            if(layerData.ks.ry instanceof Array){
+                convertNumericValue(layerData.ks.ry,degToRads);
+            }else{
+                layerData.ks.ry *= degToRads;
+            }
+            if(layerData.ks.rz instanceof Array){
+                convertNumericValue(layerData.ks.rz,degToRads);
+            }else{
+                layerData.ks.rz *= degToRads;
+            }
             if(layerData.hasMask){
                 var maskProps = layerData.masksProperties;
                 jLen = maskProps.length;
@@ -94,7 +111,7 @@
                 }
             }
             if(layerData.type=='PreCompLayer'){
-                completeLayers(layerData.layers);
+                completeLayers(layerData.layers, layerData.width,layerData.height);
             }else if(layerData.type == 'ShapeLayer'){
                 jLen = layerData.shapes.length;
                 for(j=0;j<jLen;j+=1){
@@ -160,7 +177,7 @@
     function completeData(animationData){
         animations[animationData._id] = {data:animationData,renderedFrames:[]};
         frameRate = animationData.animation.frameRate;
-        completeLayers(animationData.animation.layers);
+        completeLayers(animationData.animation.layers,animationData.animation.compWidth,animationData.animation.compHeight);
     }
 
     function convertLayerNameToID(string){
@@ -366,9 +383,15 @@
             if(interpolatedParams.type == 'p'){
                 matrixParams.px = keyframes;
                 matrixParams.py = keyframes;
+                if(interpolatedParams.threed){
+                    matrixParams.pz = keyframes;
+                }
             }else if(interpolatedParams.type == 's'){
                 matrixParams.sx = keyframes;
                 matrixParams.sy = keyframes;
+                if(interpolatedParams.threed){
+                    matrixParams.sz = keyframes;
+                }
             }else if(interpolatedParams.type == 'r'){
                 matrixParams.r = keyframes;
             }
@@ -380,9 +403,15 @@
             if(interpolatedParams.type == 'p'){
                 matrixParams.px = keyframes[0];
                 matrixParams.py = keyframes[1];
+                if(interpolatedParams.threed){
+                    matrixParams.pz = keyframes[2];
+                }
             }else if(interpolatedParams.type == 's'){
                 matrixParams.sx = keyframes[0];
                 matrixParams.sy = keyframes[1];
+                if(interpolatedParams.threed){
+                    matrixParams.sz = keyframes[2];
+                }
             }else if(interpolatedParams.type == 'r'){
                 matrixParams.r = keyframes[0];
             }
@@ -428,9 +457,15 @@
                 if(interpolatedParams.type == 'p'){
                     matrixParams.px = bezierData.points[bezierData.points.length - 1].point[0];
                     matrixParams.py = bezierData.points[bezierData.points.length - 1].point[1];
+                    if(interpolatedParams.threed){
+                        matrixParams.pz = bezierData.points[bezierData.points.length - 1].point[2];
+                    }
                 }else if(interpolatedParams.type == 's'){
                     matrixParams.sx = bezierData.points[bezierData.points.length - 1].point[0];
                     matrixParams.sy = bezierData.points[bezierData.points.length - 1].point[1];
+                    if(interpolatedParams.threed){
+                        matrixParams.pz = bezierData.points[bezierData.points.length - 1].point[2];
+                    }
                 }else if(interpolatedParams.type == 'r'){
                     matrixParams.r = bezierData.points[bezierData.points.length - 1].point[0];
                 }
@@ -439,9 +474,15 @@
                 if(interpolatedParams.type == 'p'){
                     matrixParams.px = bezierData.points[0].point[0];
                     matrixParams.py = bezierData.points[0].point[1];
+                    if(interpolatedParams.threed){
+                        matrixParams.pz = bezierData.points[0].point[2];
+                    }
                 }else if(interpolatedParams.type == 's'){
                     matrixParams.sx = bezierData.points[0].point[0];
                     matrixParams.sy = bezierData.points[0].point[1];
+                    if(interpolatedParams.threed){
+                        matrixParams.sz = bezierData.points[0].point[2];
+                    }
                 }else if(interpolatedParams.type == 'r'){
                     matrixParams.r = bezierData.points[0].point[0];
                 }
@@ -461,16 +502,22 @@
             var addedLength = 0;
             dir = 1;
             flag = true;
-            jLen = bezierData.points.length;
+            var jLen = bezierData.points.length;
             while(flag){
                 addedLength +=bezierData.points[j].partialLength*dir;
                 if(distanceInLine == 0 || perc == 0){
                     if(interpolatedParams.type == 'p'){
                         matrixParams.px = bezierData.points[j].point[0];
                         matrixParams.py = bezierData.points[j].point[1];
+                        if(interpolatedParams.threed){
+                            matrixParams.pz = bezierData.points[j].point[2];
+                        }
                     }else if(interpolatedParams.type == 's'){
                         matrixParams.sx = bezierData.points[j].point[0];
                         matrixParams.sy = bezierData.points[j].point[1];
+                        if(interpolatedParams.threed){
+                            matrixParams.sz = bezierData.points[j].point[2];
+                        }
                     }else if(interpolatedParams.type == 'r'){
                         matrixParams.r = bezierData.points[j].point[0];
                     }else{
@@ -481,9 +528,15 @@
                     if(interpolatedParams.type == 'p'){
                         matrixParams.px = bezierData.points[j].point[0];
                         matrixParams.py = bezierData.points[j].point[1];
+                        if(interpolatedParams.threed){
+                            matrixParams.pz = bezierData.points[j].point[2];
+                        }
                     }else if(interpolatedParams.type == 's'){
                         matrixParams.sx = bezierData.points[j].point[0];
                         matrixParams.sy = bezierData.points[j].point[1];
+                        if(interpolatedParams.threed){
+                            matrixParams.sz = bezierData.points[j].point[2];
+                        }
                     }else if(interpolatedParams.type == 'r'){
                         matrixParams.r = bezierData.points[j].point[0];
                     }else{
@@ -495,9 +548,15 @@
                     if(interpolatedParams.type == 'p'){
                         matrixParams.px = bezierData.points[j].point[0] + (bezierData.points[j+1].point[0] - bezierData.points[j].point[0])*segmentPerc;
                         matrixParams.py = bezierData.points[j].point[1] + (bezierData.points[j+1].point[1] - bezierData.points[j].point[1])*segmentPerc;
+                        if(interpolatedParams.threed){
+                            matrixParams.pz = bezierData.points[j].point[2] + (bezierData.points[j+1].point[2] - bezierData.points[j].point[2])*segmentPerc;
+                        }
                     }else if(interpolatedParams.type == 's'){
                         matrixParams.sx = bezierData.points[j].point[0] + (bezierData.points[j+1].point[0] - bezierData.points[j].point[0])*segmentPerc;
                         matrixParams.sy = bezierData.points[j].point[1] + (bezierData.points[j+1].point[1] - bezierData.points[j].point[1])*segmentPerc;
+                        if(interpolatedParams.threed){
+                            matrixParams.sz = bezierData.points[j].point[2] + (bezierData.points[j+1].point[2] - bezierData.points[j].point[2])*segmentPerc;
+                        }
                     }else if(interpolatedParams.type == 'r'){
                         matrixParams.r = bezierData.points[j].point[0] + (bezierData.points[j+1].point[0] - bezierData.points[j].point[0])*segmentPerc;
                     }else{
@@ -767,22 +826,33 @@
     }
 
     function createPathString(paths,closed){
+        //return '';
         var pathV,pathO,pathI;
         var pathString = '';
         var pathData;
         var k, kLen;
+        var posO,posI,posV;
 
         if(!(paths instanceof Array)){
             pathV = paths.v;
             pathO = paths.o;
             pathI = paths.i;
             kLen = pathV.length;
-            pathString += "M"+pathV[0].join(',');
+            pathString += "M"+pathV[0][0]+','+pathV[0][1];
+            //pathString += "M"+pathV[0].join(',');
             for(k=1;k<kLen;k++){
-                pathString += " C"+pathO[k-1].join(',') + " "+pathI[k].join(',') + " "+pathV[k].join(',');
+                posO =pathO[k-1];
+                posI =pathI[k];
+                posV =pathV[k];
+                pathString += " C"+posO[0]+','+posO[1] + " "+posI[0]+','+posI[1] + " "+posV[0]+','+posV[1];
+                //pathString += " C"+pathO[k-1][0]+','+pathO[k-1][1] + " "+pathI[k][0]+','+pathI[k][1] + " "+pathV[k][0]+','+pathV[k][1];
             }
             if(closed !== false){
-                pathString += " C"+pathO[k-1].join(',') + " "+pathI[0].join(',') + " "+pathV[0].join(',');
+                posO =pathO[k-1];
+                posI =pathI[0];
+                posV =pathV[0];
+                pathString += " C"+posO[0]+','+posO[1] + " "+posI[0]+','+posI[1] + " "+posV[0]+','+posV[1];
+                //pathString += " C"+pathO[k-1][0]+','+pathO[k-1][1] + " "+pathI[0][0]+','+pathI[0][1] + " "+pathV[0][0]+','+pathV[0][1];
             }
             return pathString;
         }
@@ -794,23 +864,40 @@
             pathO = pathData.o;
             pathI = pathData.i;
             kLen = pathV.length;
-            pathString += "M"+pathV[0].join(',');
+            //pathString += "M"+pathV[0].join(',');
+            pathString += "M"+pathV[0][0]+','+pathV[0][1];
             for(k=1;k<kLen;k++){
-                pathString += " C"+pathO[k-1].join(',') + " "+pathI[k].join(',') + " "+pathV[k].join(',');
+                posO =pathO[k-1];
+                posI =pathI[k];
+                posV =pathV[k];
+                pathString += " C"+posO[0]+','+posO[1] + " "+posI[0]+','+posI[1] + " "+posV[0]+','+posV[1];
+                //pathString += " C"+pathO[k-1][0]+','+pathO[k-1][1] + " "+pathI[k][0]+','+pathI[k][1] + " "+pathV[k][0]+','+pathV[k][1];
+                //pathString += " C"+pathO[k-1].join(',') + " "+pathI[k].join(',') + " "+pathV[k].join(',');
             }
             if(closed !== false){
-                pathString += " C"+pathO[k-1].join(',') + " "+pathI[0].join(',') + " "+pathV[0].join(',');
+                posO =pathO[k-1];
+                posI =pathI[0];
+                posV =pathV[0];
+                pathString += " C"+posO[0]+','+posO[1] + " "+posI[0]+','+posI[1] + " "+posV[0]+','+posV[1];
+                //pathString += " C"+pathO[k-1][0]+','+pathO[k-1][1] + " "+pathI[0][0]+','+pathI[0][1] + " "+pathV[0][0]+','+pathV[0][1];
+                //pathString += " C"+pathO[k-1].join(',') + " "+pathI[0].join(',') + " "+pathV[0].join(',');
             }
         }
+        pathsArray.push(pathString);
         return pathString;
     }
 
     var matrixParams = {
         r: 0,
+        rx: 0,
+        ry: 0,
+        rz: 0,
         sx: 1,
         sy: 1,
-        px: 1,
-        py: 1
+        sz: 1,
+        px: 0,
+        py: 0,
+        pz: 0
     };
 
     function iterateLayers(layers, frameNum,renderType){
@@ -833,17 +920,31 @@
             dataOb = {};
             interpolatedParams.arrayFlag = false;
             interpolatedParams.type = 'default';
+            interpolatedParams.threed = renderType == 'threed';
             dataOb.a = getInterpolatedValue(item.ks.a,offsettedFrameNum, item.startTime,interpolatedParams);
             dataOb.o = getInterpolatedValue(item.ks.o,offsettedFrameNum, item.startTime,interpolatedParams);
             interpolatedParams.arrayFlag = false;
             interpolatedParams.type = 'p';
             getInterpolatedValue(item.ks.p,offsettedFrameNum, item.startTime,interpolatedParams);
             interpolatedParams.arrayFlag = true;
-            interpolatedParams.type = 'r';
-            getInterpolatedValue(item.ks.r,offsettedFrameNum, item.startTime,interpolatedParams);
-            interpolatedParams.arrayFlag = true;
             interpolatedParams.type = 's';
             getInterpolatedValue(item.ks.s,offsettedFrameNum, item.startTime,interpolatedParams);
+
+            if(renderType == 'threed' && (item.threeD === true || item.type == 'CameraLayer')){
+
+                interpolatedParams.arrayFlag = true;
+                interpolatedParams.type = 'default';
+                matrixParams.rx = getInterpolatedValue(item.ks.rx,offsettedFrameNum, item.startTime,interpolatedParams);
+                matrixParams.rx = matrixParams.rx instanceof Array ? matrixParams.rx[0] : matrixParams.rx;
+                matrixParams.ry = getInterpolatedValue(item.ks.ry,offsettedFrameNum, item.startTime,interpolatedParams);
+                matrixParams.ry = matrixParams.ry instanceof Array ? matrixParams.ry[0] : matrixParams.ry;
+                matrixParams.rz = getInterpolatedValue(item.ks.rz,offsettedFrameNum, item.startTime,interpolatedParams);
+                matrixParams.rz = matrixParams.rz instanceof Array ? matrixParams.rz[0] : matrixParams.rz;
+            }else{
+                interpolatedParams.arrayFlag = true;
+                interpolatedParams.type = 'r';
+                getInterpolatedValue(item.ks.r,offsettedFrameNum, item.startTime,interpolatedParams);
+            }
             renderedData = {};
             renderedData.an = {
                 tr: dataOb
@@ -852,6 +953,15 @@
             interpolatedParams.type = 'default';
             if(renderType == 'canvas'){
                 renderedData.an.matrixArray = matrixInstance.getMatrixArrayFromParams(matrixParams.r,matrixParams.sx,matrixParams.sy,matrixParams.px,matrixParams.py);
+            }else if(renderType == 'threed'){
+                if(item.type == 'CameraLayer'){
+                    renderedData.an.matrixValue = matrixInstance.getMatrix3FromParams(matrixParams.rx,matrixParams.ry,matrixParams.rz,matrixParams.sx,matrixParams.sy,matrixParams.sz,matrixParams.px,matrixParams.py,-matrixParams.pz) + ' translate3d('+ -dataOb.a[0]+'px, '+ -dataOb.a[1]+'px, 0)';
+                    renderedData.an.cameraValue = matrixInstance.getMatrix3FromParams(-matrixParams.rx,-matrixParams.ry,matrixParams.rz,matrixParams.sx,matrixParams.sy,matrixParams.sz,-matrixParams.px,-matrixParams.py,item.pe+matrixParams.pz) + ' translate3d('+ dataOb.a[0]+'px, '+ dataOb.a[1]+'px, 0)';
+                }else if(item.threeD){
+                    renderedData.an.matrixValue = matrixInstance.getAnchoredMatrix3FromParams(matrixParams.rx,matrixParams.ry,matrixParams.rz,matrixParams.sx,matrixParams.sy,matrixParams.sz,matrixParams.px,matrixParams.py,matrixParams.pz,dataOb.a[0],dataOb.a[1],0);
+                }else{
+                    renderedData.an.matrixArray = matrixInstance.getMatrixArrayFromParams(matrixParams.r,matrixParams.sx,matrixParams.sy,matrixParams.px,matrixParams.py);
+                }
             }else{
                 renderedData.an.matrixValue = matrixInstance.getMatrix2FromParams(matrixParams.r,matrixParams.sx,matrixParams.sy,matrixParams.px,matrixParams.py) + 'translate('+ -dataOb.a[0]+' '+ -dataOb.a[1]+')';
             }
@@ -874,8 +984,10 @@
                continue;
             }
             if(item.type == 'PreCompLayer'){
-                timeRemapped = item.tm ? item.tm[offsettedFrameNum] < 0 ? 0 : item.tm[offsettedFrameNum] : offsettedFrameNum;
-                iterateLayers(item.layers,timeRemapped,renderType);
+                if(!(frameNum < item.inPoint || frameNum > item.outPoint)){
+                    timeRemapped = item.tm ? item.tm[offsettedFrameNum] < 0 ? 0 : item.tm[offsettedFrameNum] : offsettedFrameNum;
+                    iterateLayers(item.layers,timeRemapped,renderType);
+                }
             }else if(item.type == 'ShapeLayer'){
                 len = item.shapes.length;
                 for(i=0;i<len;i+=1){
@@ -908,7 +1020,7 @@
                         shapeData.fill = {
                             opacity : fillOpacity instanceof Array ? fillOpacity[0] : fillOpacity
                         };
-                        if(renderType == 'canvas'){
+                        if(renderType == 'canvas' || (renderType == 'threed' && item.threeD === false)){
                             roundColor(fillColor);
                             shapeData.fill.color = fillColor;
                         }else{
@@ -916,7 +1028,12 @@
                         }
                     }
                     if(shapeItem.ks){
-                        shapeData.path = interpolateShape(shapeItem,offsettedFrameNum, item.startTime,renderType);
+                        //(renderType == 'threed' && item.threeD === true)
+                        var rType = renderType;
+                        if(rType == 'threed'){
+                            rType = item.threeD === true ? 'svg' : 'canvas';
+                        }
+                        shapeData.path = interpolateShape(shapeItem,offsettedFrameNum, item.startTime,rType);
                     }else if(shapeItem.el){
                         elmPos = getInterpolatedValue(shapeItem.el.p,offsettedFrameNum, item.startTime,interpolatedParams);
                         elmSize = getInterpolatedValue(shapeItem.el.s,offsettedFrameNum, item.startTime,interpolatedParams);
@@ -942,7 +1059,7 @@
                             opacity : strokeOpacity instanceof Array ? strokeOpacity[0] : strokeOpacity,
                             width : strokeWidth instanceof Array ? strokeWidth[0] : strokeWidth
                         };
-                        if(renderType == 'canvas'){
+                        if(renderType == 'canvas' || (renderType == 'threed' && item.threeD === false)){
                             roundColor(strokeColor);
                             shapeData.stroke.color = strokeColor;
                         }else{
@@ -966,7 +1083,7 @@
                     //console.log('frameNum: ',frameNum);
                     //console.log('matrixParams.sx: ',matrixParams.sx);
                     //console.log('matrixParams.sy: ',matrixParams.sy);
-                    if(renderType == 'canvas'){
+                    if(renderType == 'canvas' || (renderType == 'threed' && item.threeD === false)){
                         shapeTrOb.mtArr = matrixInstance.getMatrixArrayFromParams(matrixParams.r,matrixParams.sx,matrixParams.sy,matrixParams.px,matrixParams.py);
                     }else{
                         shapeTrOb.mt = matrixInstance.getMatrix2FromParams(matrixParams.r,matrixParams.sx,matrixParams.sy,matrixParams.px,matrixParams.py);
@@ -1065,4 +1182,4 @@
     return moduleOb;
 };
 
-var dataManager = dataFunctionManager();
\ No newline at end of file
+var dataManager = dataFunctionManager();
diff --git a/player/js/utils/MatrixManager.js b/player/js/utils/MatrixManager.js
index fd440d5..da6d6bf 100644
--- a/player/js/utils/MatrixManager.js
+++ b/player/js/utils/MatrixManager.js
@@ -1,44 +1,18 @@
 function matrixManagerFunction(){
 
-    var mat = new Matrix();
+    var mat = new Matrix('2d');
+    var mat3d = new Matrix('3d');
 
-    var returnMatrix3D = function(rX, rY, rZ, scaleX, scaleY, scaleZ, tX, tY, tZ) {
+    var returnMatrix3D = function(rX, rY, rZ, scaleX, scaleY, scaleZ, tX, tY, tZ,aX, aY, aZ) {
+        //return mat3d.reset().translate(-aX,-aY,-aZ).rotateX(rX).rotateY(-rY).rotateZ(-rZ).scale(scaleX,scaleY,scaleZ).translate(tX,tY,-tZ).toCSS();
+        var tocs = mat3d.reset().translate(tX,tY,tZ).rotateX(rX).rotateY(rY).rotateZ(rZ).scale(scaleX,scaleY,scaleZ).toCSS();
+        return tocs;
+    };
 
-        var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, scaleMatrix, transformationMatrix, translationMatrix;
-        rotationXMatrix = $M([
-            [1, 0, 0, 0],
-            [0, Math.cos(rX), Math.sin(-rX), 0],
-            [0, Math.sin(rX), Math.cos(rX), 0],
-            [0, 0, 0, 1]]);
-
-        rotationYMatrix = $M([
-            [Math.cos(rY), 0, Math.sin(rY), 0],
-            [0, 1, 0, 0],
-            [Math.sin(-rY), 0, Math.cos(rY), 0],
-            [0, 0, 0, 1]]);
-
-        rotationZMatrix = $M([
-            [Math.cos(rZ), Math.sin(-rZ), 0, 0],
-            [Math.sin(rZ), Math.cos(rZ), 0, 0],
-            [0, 0, 1, 0],
-            [0, 0, 0, 1]]);
-
-
-        scaleMatrix = $M([[scaleX, 0, 0, 0], [0, scaleY, 0, 0], [0, 0, scaleZ, 0], [0, 0, 0, 1]]);
-
-        transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix).x(scaleMatrix);
-        transformationMatrix = transformationMatrix.transpose();
-        translationMatrix = $M([[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [tX, tY, tZ, 1]]);
-        transformationMatrix = transformationMatrix.x(translationMatrix); // Apply transformation matrix AFTER transposing rotation and scale
-
-        s = "matrix3d(";
-        s += transformationMatrix.e(1, 1).toFixed(5) + "," + transformationMatrix.e(1, 2).toFixed(5) + "," + transformationMatrix.e(1, 3).toFixed(5) + "," + transformationMatrix.e(1, 4).toFixed(5) + ",";
-        s += transformationMatrix.e(2, 1).toFixed(5) + "," + transformationMatrix.e(2, 2).toFixed(5) + "," + transformationMatrix.e(2, 3).toFixed(5) + "," + transformationMatrix.e(2, 4).toFixed(5) + ",";
-        s += transformationMatrix.e(3, 1).toFixed(5) + "," + transformationMatrix.e(3, 2).toFixed(5) + "," + transformationMatrix.e(3, 3).toFixed(5) + "," + transformationMatrix.e(3, 4).toFixed(5) + ",";
-        s += transformationMatrix.e(4, 1).toFixed(5) + "," + transformationMatrix.e(4, 2).toFixed(5) + "," + transformationMatrix.e(4, 3).toFixed(5) + "," + transformationMatrix.e(4, 4).toFixed(5);
-        s += ")";
-
-        return s;
+    var returnMatrixAnchored3D = function(rX, rY, rZ, scaleX, scaleY, scaleZ, tX, tY, tZ,aX, aY, aZ) {
+        //return mat3d.reset().translate(-aX,-aY,-aZ).rotateX(rX).rotateY(-rY).rotateZ(-rZ).scale(scaleX,scaleY,scaleZ).translate(tX,tY,-tZ).toCSS();
+        var tocs = mat3d.reset().translate(-aX,-aY,-aZ).rotateZ(-rZ).rotateY(rY).rotateX(rX).scale(scaleX,scaleY,scaleZ).translate(tX,tY,-tZ).toCSS();
+        return tocs;
     };
 
     /*var returnMatrix2D = function(rX, scaleX, scaleY, tX, tY){
@@ -114,9 +88,10 @@
                 ,animData.s[0],animData.s[1]
                 ,animData.p[0],animData.p[1]);
         }
-        return returnMatrix3D(-animData.r[0],animData.r[1],animData.r[2]
+        return returnMatrix3D(-animData.rx[0],animData.ry[1],animData.rz[2]
             ,animData.s[0],animData.s[1],animData.s[2]
-            ,animData.p[0],animData.p[1],animData.p[2])
+            ,animData.p[0],animData.p[1],animData.p[2]
+            ,animData.a[0],animData.a[1],animData.a[2])
     };
 
     var getMatrixArray = function(animData, isThreeD){
@@ -134,8 +109,10 @@
         getMatrix2 : getMatrix2,
         getMatrixArray : getMatrixArray,
         getMatrixArrayFromParams : returnMatrix2DArray,
-        getMatrix2FromParams : returnMatrix2D
+        getMatrix2FromParams : returnMatrix2D,
+        getMatrix3FromParams : returnMatrix3D,
+        getAnchoredMatrix3FromParams : returnMatrixAnchored3D
     }
 
 };
-var MatrixManager = matrixManagerFunction;
\ No newline at end of file
+var MatrixManager = matrixManagerFunction;
diff --git a/player/js/utils/common.js b/player/js/utils/common.js
index 88516af..a8d5e5a 100644
--- a/player/js/utils/common.js
+++ b/player/js/utils/common.js
@@ -9,9 +9,7 @@
     element.style.position = 'absolute';
     element.style.top = 0;
     element.style.left = 0;
-    element.style.display = 'block';
-    element.style.verticalAlign = 'top';
-    element.style.backfaceVisibility  = element.style.webkitBackfaceVisibility = 'hidden';
+    element.style.backfaceVisibility  = element.style.webkitBackfaceVisibility = 'visible';
     //element.style.transformStyle = element.style.webkitTransformStyle = "preserve-3d";
     styleUnselectableDiv(element);
 }
@@ -87,4 +85,4 @@
         colorMap[i] = hex.length == 1 ? '0' + hex : hex;
     }
 }
-createColorMap();
\ No newline at end of file
+createColorMap();