Famo.us Base Fiddle

Using the compiled library from https://github.com/jperl/famous-compiled

by orchid1

HTML

<link rel="stylesheet" href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css">
<script src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>
<script src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>

CSS

.backface{
    backface-visibility: visible;
}

JavaScript

Famous.loaded(function () {
    var Engine = Famous.Core.Engine,
        Surface = Famous.Core.Surface,
        StateModifier = Famous.Modifiers.StateModifier,
        Transform = Famous.Core.Transform;

    var context = Engine.createContext();

    var size = 100,
        matrix = [],
        surfaces = [],
        modifiers = [],
        rotates = [
            [0, 0, 0],
            [0, 0, 0],
            [90, 0, 0],
            [-90, 0, 0]
        ],
        xlate = [
            [0, 0, size],
            [0, 0, -size],
            [0, size, 0],
            [0, -size, 0]
        ],
        colors = ['red', 'blue', 'violet', 'green'],
        m = Transform.translate(0, 0, 0);

    context.setPerspective(500);


    function originalCube() {

        var i, xlt, rot;

        for (i = 0; i < colors.length; i++) {
            xlt = xlate[i];
            rot = rotates[i];
            matrix.push(Transform.multiply(
                Transform.translate(xlt[0], xlt[1], xlt[2]),
                Transform.rotate(toRadians(rot[0]), toRadians(rot[1]), toRadians(rot[2]))));

            modifiers[i].setTransform(
                matrix[i]);
        }
    }

    function rotate() {
        var i = 0;
        m = Transform.multiply(m, Transform.rotateX(toRadians(90)));

        for (i; i < colors.length; i++) {

            modifiers[i].setTransform(
                Transform.multiply(m, matrix[i]), {duration: 500}
            );
        }
    }


    for (var i = 0; i < colors.length; i++) {
        surfaces[i] = new Surface({
            size: [size * 2, size * 2],
            properties: {
                backgroundColor: colors[i],
                opacity: 0.9
            }
        });
        surfaces[i].addClass("backface");

        modifiers[i] = new StateModifier({
            origin: [0.5, 0.5],
            align: [0.5, 0.5]
        });
        context.add(modifiers[i]).add(surfaces[i]);

        surfaces[i].on("click", function () {
            rotate();
      ...