3D Cube Slider Plugin with jQuery and CSS3 - cubeSlider

File Size: 3.15 KB
Views Total: 6219
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
3D Cube Slider Plugin with jQuery and CSS3 - cubeSlider

cubeSlider is a very small jQuery plugin that turns a list of DIV elements into an automatic 3D slider / rotator with CSS3 animations.

See also:

How to use it:

1. Load the latest version of jQuery and jQuery cubeSlider plugin in the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.cubeSlider.js"></script>

2. Create a list of DIV elements for the cube slider.

<ul class="demo">

3. The required CSS / CSS3 styles.

* {
  margin: 0;
  padding: 0;

.demo > li {
  float: left;
  list-style-type: none;
  position: absolute;
  opacity: 0.6;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  text-align: center;
  color: #fff;
  font-size: 70px;
  cursor: pointer;

.demo {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  -webkit-transform: rotateY(-10deg) rotateX(-20deg);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 400px;
  position: relative;

.demo > li > div {
  background: #F44336;
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;

4. Enable the plugin.


5. Default options.


  // width of the cube slider
  width: 100,

  // height of the cube slider
  height: 100,

  // autoplay interval
  timer: false,

Change log:


  • bugfix

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