Playing withh css3d transforms

build/diagram.js

@@ -553,6 +553,11 @@
 		context.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
 	};
 
+	Matrix.prototype.cssTransform = function()
+	{
+		return "matrix3d(" + this.m[0] + "," + this.m[2] + "," + this.m[4] + ",0," + this.m[1] + "," + this.m[3] + "," + this.m[5] + ",0,0,0,1,0,0,0,0,1)";
+	};
+
 	/**
 	 * Implements all UUID related methods.
 	 *

build/diagram.module.js

@@ -547,6 +547,11 @@ Matrix.prototype.tranformContext = function(context)
 	context.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
 };
 
+Matrix.prototype.cssTransform = function()
+{
+	return "matrix3d(" + this.m[0] + "," + this.m[2] + "," + this.m[4] + ",0," + this.m[1] + "," + this.m[3] + "," + this.m[5] + ",0,0,0,1,0,0,0,0,1)";
+};
+
 /**
  * Implements all UUID related methods.
  *

examples/diagram.html

@@ -32,6 +32,16 @@
 			canvas.height = window.innerHeight;
 		};
 
+		var div = document.createElement("div");
+		div.style.position = "absolute";
+		div.style.transformOrigin = "0px 0px 0px";
+		div.style.width = "100px";
+		div.style.height = "100px";
+		div.style.backgroundColor = "#FF0000";
+		div.style.WebkitTransformStyle = "preserve-3d";
+		div.style.transformStyle = "preserve-3d";
+		document.body.appendChild(div);
+
 		// Create the diagram
 		var group = new Diagram.Object2D();
 
@@ -94,6 +104,10 @@
 			renderer.update(group, viewport);
 			renderer.render(group, viewport);
 
+			var projection = group.globalMatrix.clone();
+			projection.multiply(viewport.matrix);
+			div.style.transform = projection.cssTransform();
+
 			requestAnimationFrame(loop);
 		}
 

source/math/Matrix.js

@@ -210,4 +210,10 @@ Matrix.prototype.tranformContext = function(context)
 	context.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
 };
 
+Matrix.prototype.cssTransform = function()
+{
+	return "matrix3d(" + this.m[0] + "," + this.m[2] + "," + this.m[4] + ",0," + this.m[1] + "," + this.m[3] + "," + this.m[5] + ",0,0,0,1,0,0,0,0,1)";
+};
+
+
 export {Matrix};