Cert fallback. Haphazardly adding vendor prefixes to transforms.

modules/certificate/certificate.js

@@ -15,7 +15,7 @@
     window.URL = window.URL || window.webkitURL;
 
     var width = 221, height = 221
-    var offsetX = 291, offsetY = 314
+    var offsetX = 291, offsetY = 300
 
     var video = document.getElementById('monitor');
     var canvas = document.getElementById('photo');
@@ -77,7 +77,7 @@
     function noStream(e) {
       // JB: Safari and IE don't support webcam, so we could make a nicer back up maybe?
       // cameraErrorMessage.textContent = 'No camera available :('
-      d3.select('#certificate').attr('src', 'images/certificatedemo.png')
+      d3.select('#certificate').attr('src', 'images/certificatedemo_800_nocamera.png')
 
     }
 

modules/crapplets/crapplets.css

@@ -25,4 +25,7 @@
 [data-module="crapplets"] .crapplets img {
   position: absolute;
   transform: translate(-50%,-50%);
+  -webkit-transform: translate(-50%,-50%);
+  -moz-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
 }

modules/debug/debug.js

@@ -141,6 +141,8 @@
       bugs.forEach(function(d){
         if (d.correct || !d.visable) return
         d.imgEl
+          .style('-ms-transform', 'rotate(' + Math.sin(t/500 + d.t*500)*30 + 'deg)')
+          .style('-moz-transform', 'rotate(' + Math.sin(t/500 + d.t*500)*30 + 'deg)')
           .style('-webkit-transform', 'rotate(' + Math.sin(t/500 + d.t*500)*30 + 'deg)')
           .style('padding-left', Math.sin(t/743 + d.t*500)*60 + 'px')
           .style('padding-top', Math.sin(t/343 + d.t*700)*20 + 'px')

modules/grabbag/grabbag.js

@@ -79,11 +79,20 @@
     ]);
 
     d3.select('article')
+      .style("-ms-transform","scale(1)")
+      .style("-moz-transform","scale(1)")
+      .style("-webkit-transform","scale(1)")
       .style("transform","scale(1)")
       .transition()
       .duration(20000)
+      .style("-ms-transform","scale(.01)")
+      .style("-moz-transform","scale(.01)")
+      .style("-webkit-transform","scale(.01)")
       .style("transform","scale(.01)");
     d3.selectAll('article p')
+      .style("-ms-transform","rotate(0deg)")
+      .style("-moz-transform","rotate(0deg)")
+      .style("-webkit-transform","rotate(0deg)")
       .style("transform","rotate(0deg)")
       .transition()
       .duration(15000)

modules/keyboard/keyboard.css

@@ -48,6 +48,9 @@
   line-height: 1em;
   padding: 0;
   transform: rotate(0deg) translate(-50%, -50%);
+  -webkit-transform: rotate(0deg) translate(-50%, -50%);
+  -moz-transform: rotate(0deg) translate(-50%, -50%);
+  -ms-transform: rotate(0deg) translate(-50%, -50%);
 }
 
 

modules/mouse/mouse.css

@@ -9,6 +9,9 @@
   font-size: 10pt;
   pointer-events: none;
   transform: translate(-50%,-50%);
+  -webkit-transform: translate(-50%,-50%);
+  -moz-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
   text-align: center;
 }
 .event-log.mousemove {

modules/mouse/mouse.js

@@ -48,6 +48,9 @@
         .style("left", d3.event.clientX+"px")
         .style("top", d3.event.clientY+"px")
         .style("transform", "translate(-50%,-50%) rotate("+ (Math.random()*60-30).toFixed() +"deg)")
+        .style("-webkit-transform", "translate(-50%,-50%) rotate("+ (Math.random()*60-30).toFixed() +"deg)")
+        .style("-moz-transform", "translate(-50%,-50%) rotate("+ (Math.random()*60-30).toFixed() +"deg)")
+        .style("-ms-transform", "translate(-50%,-50%) rotate("+ (Math.random()*60-30).toFixed() +"deg)")
         .style("color", color)
         .html(d3.event.type + "<br/><small>(" + d3.event.clientX + ", " + d3.event.clientY + ")</small>")
         .transition()

modules/tree/tree.css

@@ -45,6 +45,9 @@
   border: 10px solid #2800d7;
   width: 150px;
   height: 150px;
+  -webkit-transform: translate(-50%,-50%) scale(.2);
+  -moz-transform: translate(-50%,-50%) scale(.2);
+  -ms-transform: translate(-50%,-50%) scale(.2);
   transform: translate(-50%,-50%) scale(.2);
   pointer-events: none;
   z-index: 2;

modules/tree/tree.js

@@ -43,7 +43,9 @@
         .attr("height", height + margin.top + margin.bottom)
       .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
-        // .on("mousemove", mousemove);
+        .attr("-webkit-transform", "translate(" + margin.left + "," + margin.top + ")")
+        .attr("-moz-transform", "translate(" + margin.left + "," + margin.top + ")")
+        .attr("-ms-transform", "translate(" + margin.left + "," + margin.top + ")");
 
     // invisible rect to capture mousemoves
     svg.append("rect")
@@ -112,6 +114,9 @@
           .classed("parent", function(d) { return d.children; })
           .classed("expandable", function(d) { return d._children && d._children.length; })
           .attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
+          .attr("-webkit-transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
+          .attr("-moz-transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
+          .attr("-ms-transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
           .on("click", click)
           .on("mouseover", mouseover)
           .on("mouseout", mouseout);

styles/main.css

@@ -461,6 +461,9 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
   border: 1px solid black;
   margin-top: 0.5em;
   transform: translate(-50%,0);
+  -webkit-transform: translate(-50%,0);
+  -moz-transform: translate(-50%,0);
+  -ms-transform: translate(-50%,0);
   display: none;
   z-index: 2;
 }
@@ -483,6 +486,9 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
   border: 1px solid black;
   margin-top: 0.5em;
   transform: translate(-50%,0);
+  -webkit-transform: translate(-50%,0);
+  -moz-transform: translate(-50%,0);
+  -ms-transform: translate(-50%,0);
 }