3D Cube Like Countdown Timer Plugin with jQuery - countdownCube

File Size: 15.3 KB
Views Total: 4592
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
3D Cube Like Countdown Timer Plugin with jQuery - countdownCube

countdownCube is a simple and easy-to-use jQuery plugin for creating a pretty look countdown timer with 3D rotation effects using CSS3 transitions.

Related Plugins:

How to use it:

1. Include jQuery library and jQuery countdownCube

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="countdowncube.js"></script>

2. Include required CSS file to style your timer

<link href="countdowncube.css" rel="stylesheet" type="text/css">

3. Create the markup for your countdown timer

<div id="counter"></div>

4. The javascript to activate the countdown timer.

$('#counter').countdownCube( {
  target: new Date( 'May 25, 2018 13:30:00' ),
  cubeSize: 50,
  background: 'rgba( 255, 150, 150, 0.8 )',
  color: 'white',

5. Set the timezone you prefer.

$('#counter').countdownCube( {
  targetTimezone: 'UTC'

6. Customize the label's translations.

$('#counter').countdownCube( {
  labelsTranslations: {
    'year': 'years',
    'month': 'months',
    'day': 'days',
    'hour': 'hours',
    'minute': 'minutes',
    'second': 'seconds'

7. Only show days.

$('#counter').countdownCube( {
  showDaysOnly: false

8. Callback functions.

$('#counter').countdownCube( {
  onEnd: function(e) { return; },
  triggerEnd: false



  • Fixed: Conflict with Array extensions


  • Fix inconsistent behavior when countdown reaches zero and when now > target
  • Add onEnd and triggerEnd options to trigger an event when the counter ends


  • Add timezone support

v0.0.8 (2013-07-10)

  • Check if 3d is supported and warn if not

This awesome jQuery plugin is developed by oofaish. For more Advanced Usages, please check the demo page or visit the official website.