HTML5 Camera Demo

Explains the subtle definition of a "camera" concept in HTML5

CSS

@-webkit-keyframes rotating {
    from{
        -webkit-transform: translateZ(-200px) rotateY(0deg);
    }
    to{
        -webkit-transform: translateZ(-200px) rotateY(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 5s linear infinite;
}

JavaScript

/**
 * Created by NeoRiley on 5/2/16.
 */

function run(){
		var world = create3DWorld({x:0, y:0, width: 990, height: 670});
    createBillboard({x:20, y:0, width: 250, height: 250}, world);
    createBillboard({x:400, y:0, width: 250, height: 250}, world);
    createBillboard({x:200, y:360, width: 250, height: 250}, world);
}

function createBillboard(p_bounds, p_world){
		var world = p_world;
    var moveToXY = p_world === null ? false : true;
    if( world === null ){
    	world = create3DWorld(p_bounds);
    }
    
    // container for positioning the billboard.  
    // Since the billboard's transform is overwritten every frame, the posContainer makes it easy to position 
    // something that's transforming
    var posContainer = $create3DContainer(p_bounds);
    posContainer.id = "posContainer";
    //posContainer.style.position = "relative";

    var billboard = $create3DContainer(p_bounds);
    billboard.id = "billboard";
    //billboard.style.position = "relative";
    billboard.className = "rotating";
    
    var str = "l0l";

    var panel_front = $createPanel(str, p_bounds);
    panel_front.style.color = "#FFFFFF";
    panel_front.style.background = "rgba(0, 255, 0, 0.5";

    var panel_back = $createPanel(str, p_bounds);
    panel_back.style.color = "#FFFFFF";
    panel_back.style.background = "rgba(0, 0, 255, 0.5";

    var panel_left = $createPanel(str, p_bounds);
    panel_left.style.color = "#FFFFFF";
    panel_left.style.background = "rgba(255, 0, 0, 0.5";

    var panel_right = $createPanel(str, p_bounds);
    panel_right.style.color = "#FFFFFF";
    panel_right.style.background = "rgba(255, 156, 0, 0.5";

    world.appendChild(posContainer);
    posContainer.appendChild(billboard);
    billboard.appendChild(panel_front);
    billboard.appendChild(panel_back);
    billboard.appendChild(panel_left);
    billboard.appendChild(panel_right);
    
    if( moveToXY ){
      world.style.webkitTransform = "rotateZ(45deg)";
   ...