Skip to content
rotate3d manipulation library - lightweight and extensible
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


rotate3d manipulation library


Here is a simple demo.

Main Features

  • enables manipulation of DOM nodes on three rotation axis, as if it was wrapped in a virtual trackball
  • set and get current rotation of rotor enabled nodes
  • lightweight (2.4k minified / 1.3k gzipped) and clean code base
  • built with extensibility in mind (event helpers and geometry utils included)


rotor( elem, [options] )

Rotor constructor: enables manipulation of elem on three rotation axis. The only option currently availbale is inertia, which is on by default.

// create a new rotor instance and disable inertia
rtr = rotor( elem, { inertia: false } );

.rotation( [axisAngle] )

Rotation getter/setter: modify or access the current rotation of a rotor instance

// setter
    x: xVal,
    y: yVal,
    z: zVal,
    a: angle
// getter

.on() / .off()

Enable/Disable manipulation of a rotor instance

// disable;
// re-enable

rotor.aaProd( axisAngle0, axisAngle1 )

Combine two rotations by calculating the product of two axis-angles

// Rotate a DOM node by 90deg on the Z axis,
// relative to its current rotation
var currentRotation = rtr.rotation(),
    zRotation = {
        x: 0,
        y: 0,
        z: 1,
        a: Math.PI / 2
    newRotation = rotor.aaProd( currentRotation, zRotation );

rtr.rotation( newRotation );


rotor.js is easy to extend using its event helpers and geometry utils, see the wiki.

Credits & License

Inspired from traqball.js by dirkweber

Geometry algos adapted from

MIT Licensed

Something went wrong with that request. Please try again.