Making 3D shapes using CSS Transforms

gistfile1.js

var CupView = Backbone.View.extend({

	'events': {},

	'settings': {
		'shardCount': 10,
		'columnWidth': 300,
		'columnHeight': 500
	},

	'initialize': function(options) {

		_.bindAll(this);

		var view = this;

		if ( view.options.settings ) {
			_.extend(view.settings, view.options.settings);
		}

		App.bind('rotate:cup', view.updateRotation);

		this.render();

		log('Backbone : CupView : Initialized');
	},

	'render': function() {

		var view = this,
		    cupShards = [],
		    shardCount = view.settings.shardCount,
		    columnHeight = view.settings.columnHeight,
		    columnWidth = view.settings.columnWidth,
		    shardWidth = Math.ceil(columnWidth * Math.tan( Math.PI / shardCount )) + 5, // +5 to account for gaps.
		    $shardWrapper = view.$el.find('.shard_wrapper');

		if ( $shardWrapper.length === 0 ) {

			$shardWrapper = $(document.createElement('div'));
			$shardWrapper.addClass('shard_wrapper');
			view.$el.append($shardWrapper);

		}

		for ( var i = 0; i < shardCount; i++ ) {

			var $shard = $(document.createElement('div')),
			    shardRotation = i * ( 360 / shardCount );

			$shard.css({
				'background-position': -1 * shardWidth * i + "px " + 0,
				'background-size': shardWidth * shardCount + 'px ' + columnHeight + 'px',
				'height': columnHeight,
				'left': -1 * shardWidth / 2,
				'top': -1 * columnHeight / 2,
				'width': shardWidth,
				'-moz-transform': 'rotateY('+shardRotation+'deg) translateZ('+columnWidth/2+'px) rotateX(-6deg)',
				'-webkit-transform': 'rotateY('+shardRotation+'deg) translateZ('+columnWidth/2+'px) rotateX(-6deg)'
			});

			$shard.addClass('shard').appendTo($shardWrapper);

		}
	},

	'updateRotation': function(newRotation) {

		var view = this;

		$('.shard_wrapper').css({
			'-moz-transform': 'rotateX('+ newRotation.x +'rad) rotateY('+ newRotation.y +'rad) rotateZ('+ newRotation.z +'rad)',
			'-webkit-transform': 'rotateX('+ newRotation.x +'rad) rotateY('+ newRotation.y +'rad) rotateZ('+ newRotation.z +'rad)'
		});
	}
});