Slicebox – A fresh 3D image slider with graceful fallback

Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties.

With the CSS 3D Transforms we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3D object. In case the browser does not support 3D transforms, a simple slider will be used as fallback.

Please note that you can only see the cool 3D effect of Slicebox in a browser that supports those CSS3 properties.

The images used in the demos are by ND Strupler. They are licensed under the Attribution 2.0 Generic (CC BY 2.0).


In order to use Slicebox, put your images in an unordered list with the class “sb-slider”:

<ul id="sb-slider" class="sb-slider">

		<a href="#" target="_blank">
			<img src="images/1.jpg" alt="image1"/>
		<div class="sb-description">
			<h3>Creative Lifesaver</h3>

		<img src="images/2.jpg" alt="image2"/>
		<div class="sb-description">

	<li><!-- ... --></li>
	<!-- ... -->

You can use the div with the class “sb-description” to add any kind of description for the respective image. As shown in this example, you can also add an anchor around the image.

Then you can call the plugin with



Slicebox comes with a set of options that you can adjust for various types of effects:

$.Slicebox.defaults = {
	// (v)ertical, (h)orizontal or (r)andom
	orientation : 'v',

	// perspective value
	perspective : 1200,

	// number of slices / cuboids
	// needs to be an odd number 15 => number > 0 (if you want the limit higher, 
	// change the _validate function).
	cuboidsCount : 5,

	// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
	cuboidsRandom : false,

	// the range of possible number of cuboids if cuboidsRandom is true
	// it is strongly recommended that you do not set a very large number :)
	maxCuboidsCount : 5,

	// each cuboid will move x pixels left / top (depending on orientation). 
	// The middle cuboid doesn't move. the middle cuboid's neighbors will 
	// move disperseFactor pixels
	disperseFactor : 0,

	// color of the hidden sides
	colorHiddenSides : '#222',

	// the animation will start from left to right. The left most 
	// cuboid will be the first one to rotate
	// this is the interval between each rotation in ms
	sequentialFactor : 150,

	// animation speed
	// this is the speed that takes "1" cuboid to rotate
	speed : 600,

	// transition easing
	easing : 'ease',

	// if true the slicebox will start the animation automatically
	autoplay : false,

	// time (ms) between each rotation, if autoplay is true
	interval: 3000,

	// the fallback will just fade out / fade in the items
	// this is the time fr the fade effect
	fallbackFadeSpeed : 300,
	// callbacks
	onBeforeChange : function( position ) { return false; },
	onAfterChange : function( position ) { return false; }

Check out each example and you will see how to create different behaviors with the options.

Hope you find it useful, feedback is welcome!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

πŸ‘Ύ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 180

Comments are closed.
    • @Marcin Thanks!
      @Jhon What exactly? What do you see? I have the same version and its working fine :S

  1. its very nice and beautiful… for the last few i have searching this animation jquery……. really nice…. thanks Pedro

  2. This is beautiful, great work! I love the subtle expansion of the blocks as they rotate, nice detail.

  3. This is the second demo I can’t get to work πŸ™

    Chrome 13.0.782.215 m
    Windows XP

    I just see a regular slider…

  4. man.. i have already seen somethings on the net. i saw great eand amazing things, but this is one of the best i saw in my trip on the web.. thx for share this man.. and for those men, that said “i dont use IE” an advise, use it even if it were to see this, it worth… see you all..

  5. This is awesome. Never commented here before, but I’ve been following this blog for quite a while. Every demo you guys showcase beats any other demo that has to do with fancy animations and smart use of jQuery all over the web! Well done!

  6. Very nice

    Unfortunately Firefox does not support 3d transforms yet. I did see a similar one on CodeCanyon that also worked in Firefox but that was done using Canvas and had performance issues.

  7. Do you think it could be adapted to a full screen mode ?
    Like the switch session effect of Mac os X…

  8. Hello, how do I put a link to an external site like an ecommerce site? I want to include a link in the description.

    It’s Excellent!

  9. first of all i would like to say this is by far the best slider that i have seen! greate work Pedro.

    i have downloaded the source files and opened them on the latest chrome browser but it doesn’t seem to work, it only shows one image it doesn’t slide to the next image.

    could you please tell me how to fix this.


  10. Incredible, beautiful work. It works well with chrome 13.0.782.220 (Mac).
    Can I put a link on the title or the image? And to make the title always in sight without pressing “info”?

    Thanks and sorry for my English, Elisa.

  11. Amazing stuff here and very sad that FFox doesn’t support it. I wouldn’t use this until at least FFox or IE is able to run the nice script. Thanks a lot for this.

  12. really awesome trick.. Im still newbie in css3, and this is really motivating, thanks a lot for this neat tutorial

  13. Very nice! Thank you, Pedro.
    I especially like the animation speed–it doesn’t get in the way of the user nav-ing between panels.
    BTW, works fine for me in Chrome 13.0.782.220 (win7-64bit). Of course, not in FF. It *should* work in my IE9, but the demo thinks it can’t and doesn’t try.
    C-A-N-‘-T wait for enough of the world to adopt css3 (and canvas/svg) so we can start using these great techniques in the wild!