Skip to content
A CSS-based 3D graphics library
JavaScript CoffeeScript
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Updated the version number Mar 8, 2014
docs Renamed clearAnimation to clearAnimations Sep 5, 2012
examples typo fix Nov 10, 2013
src Updated the version number Mar 8, 2014
test Replaced the deprecated APIs of quint Mar 8, 2014 Updated the version number Mar 8, 2014
Cakefile Changed to only build the minified version Sep 4, 2012
LICENSE Added linefeeds Apr 9, 2012 Modified Sep 4, 2012


DivSugar is a CSS-based 3D graphics library, which provides a 3D scene graph, an animation system, and geometry classes. Each node of the scene graph is an extended div element, so it is very easy to integrate 3D animations into existing web pages.

DivSugar depends on CSS 3D transforms and runs on Safari, Chrome, and Firefox for now.

Getting Started

Include divsugar.js, then all of the functions get available via the DivSugar global variable.

<script src="divsugar.js"></script>

A Scene is the root of a scene graph and specifies the rendering area. A Node is an element of a scene graph and draws an image. Both of them contain div elements as their properties.

var scn = new DivSugar.Scene()
  .setSize(800, 600)

var node = new DivSugar.Node()
  .setSize(300, 300)
  .setPosition(10, 20, 30)

DivSugar provides a Task, which calls the onUpdate method of the registered Tasks in every frame. It also calls the onDestroy method when the Task is destroyed.

var task = new DivSugar.Task().appendTo(DivSugar.rootTask);

task.onUpdate = function() {
  node.rotate(this.deltaTime * 0.1, this.deltaTime * 0.2, this.deltaTime * 0.3);

task.onDestroy = function() {

With the playAnimation method of a Node, it is possible to make the Task which plays a sequence of animations automatically.

  ['to', { size: [100, 100], opacity: 0 }, 500, DivSugar.Ease.quadInOut],
  ['wait', 500],
  ['to', { size: [200, 200], opacity: 1 }, 1000, DivSugar.Ease.linear],
  ['play', someAnim],
  ['call', someFunc],
  ['repeat', 10]




  • MIT license
You can’t perform that action at this time.