JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 4/5 ( 1 votes)
Your Rating:
Cube.js is a light script which allows you to add a fancy rotating CSS3 cube to your page!
Source: xhtmlized.github.io
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="cube.css"> <script src="cube.js"></script>
2. HTML
<div id="the-cube" class="the-cube"> <span class="side-1"></span> <span class="side-2"></span> <span class="side-3"></span> <span class="side-4"></span> <span class="side-5"></span> <span class="side-6"></span> </div>
3. JAVASCRIPT
var myCube = new Cube('#the-cube');
myCube.rotate({
speedX: 10000,
speedY: 10000,
speedZ: 10000,
startSide: 'side-1'
});
4. OPTIONS
Apply Rotation
Set rotation of the cube.
{
x: [number from 0 to 360],
y: [number from 0 to 360],
z: [number from 0 to 360]
}
or
{ side: ['side-1', 'side-2', …, or 'side-6'] }
Example:
var myCube = Cube('#the-cube2');
// Set the cube's postion
myCube.applyRotation({
x: 45,
y: 30,
z: 270
});
Example:
var myCube = Cube('#the-cube2a');
// Set the cube's postion
myCube.applyRotation({ side: 'side-5' });
Rotate
Start infinite rotation animation.
{
startSide: ['side-1', 'side-2', 'side-3', 'side-4', 'side-5', 'side-6'],
speedX: [number, time in milliseconds],
speedY: [number, time in milliseconds],
speedZ: [number, time in milliseconds],
rotateDir: ['left' or 'right']
}
Example:
var myCube = Cube('#the-cube3');
// Cube will start rotating
myCube.rotate({
startSide: 'side-3',
speedX: 5000, // 5 seconds to rotate by 360 degrees
speedY: 20000, // 20 seconds to rotate by 360 degrees
speedZ: 10000 // 10 seconds to rotate by 360 degrees
});
Example:
var myCube = Cube('#the-cube3a');
// Cube will start rotating only on one axis
myCube.rotate({
startSide: 'side-3',
speedX: 0,
speedY: 20000, // 20 seconds to rotate by 360 degrees
speedZ: 0
});
Example:
var myCube = Cube('#the-cube3b');
// Cube will start rotating only on one axis
// to the left
myCube.rotate({
startSide: 'side-3',
speedX: 0,
speedY: 10000, // 10 seconds to rotate by 360 degrees
speedZ: 0,
rotateDir: 'left'
});
Focus On
Animate to the specified side of the cube on mouseover or touchstart event.
{
bounceBack: true,
spinTo: ['side-1', 'side-2', …, or 'side-6'],
spinToX: [number from 0 to 360],
spinToY: [number from 0 to 360],
spinToZ: [number from 0 to 360]
}
Example:
var myCube = Cube('#the-cube4');
// Cube will spin to the selected side
// and back to the previous position
myCube.focusOn({
bounceBack: true,
spinTo: 'side-5'
});
Example:
var myCube = Cube('#the-cube4a');
// Cube will spin to the selected side
myCube.focusOn({
spinTo: 'side-5'
});
Example:
var myCube = Cube('#the-cube4b');
// Cube will spin to the selected side
// and back to the previous position
myCube.focusOn({
bounceBack: true,
spinToX: 33,
spinToY: 88,
spinToZ: 289
});
Example:
var myCube = Cube('#the-cube4c');
// Start rotating
myCube.rotate({
startSide: 'side-3',
speedX: 0, // 5 seconds to rotate by 360 degrees
speedY: 10000, // 20 seconds to rotate by 360 degrees
speedZ: 10000, // 10 seconds to rotate by 360 degrees
rotateDir: 'left'
});
// Cube will spin to the selected side
// and back to the previous position
myCube.focusOn({
bounceBack: true,
spinTo: 'side-1'
});
