html css 3d cube image slider header

HTML CSS 3D Cube Slider Tutorial – 2016

3D Cube Image Slider with CSS Transform

Today, I am going to show you how to create a neat CSS 3D cube slider with HTML and CSS coding languages. A spinning 3D Cube is a very cool technique to show off images as well as your coding skills. CSS has come a long way and animations are much easier to create without the need for extra languages. We will be using CSS transform and CSS animation properties to create a cube. The 3D cube, that we will design, will have pictures on each of the 6 sides, then it will spin and show all the pictures before restarting the CSS animation. Here is the HTML CSS 3D cube slider that we will be creating:

css transform 3d 1

 
 
 

*CSS Animations may vary slightly due to browser compatibility.

 

The images I selected are random 300 x 300 pixel images. I used Google Image Search to find random car images. It is best if all your images are same height and width, as this is a 3D Cube slider (not rectangle :)). Therefore, all the sides should be the same size.

Remember, the more images you use, the longer it will take for your slider to load.

CSS transform 3d 1

Images I used. Right-click -> Save As..

First, we need to setup our folder structure and create the necessary files. I created a folder called CSS3DSlider. Inside the CSS3DSlider folder I created an index.html and a style.css file. I also created an images folder that holds our 6 images (shown above), each named by the corresponding number:

3d cube slider folders
HTML part

Let’s setup the HTML. Open up your favorite text editor and copy and paste the following code:


/*Transform CSS example - Techsideonline.com HTML CSS 3d cube slider */
<!DOCTYPE html>
<html>
<head>
	<title>Techsideonline.com 3D cube slider</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
<div align="center">
<div class="stage" style="width:300px;height:300px;">
<div class="cube">
	<div class="side1" style="background-color:red"><img src="images/one.jpg"></div>
	<div class="side2" style="background-color:green"><img src="images/two.jpg"></div>
	<div class="side3" style="background-color:blue"><img src="images/three.jpg"></div>
	<div class="side4" style="background-color:orange"><img src="images/four.jpg"></div>
	<div class="side5" style="background-color:purple"><img src="images/five.jpg"></div>
	<div class="side6" style="background-color:pink"><img src="images/six.jpg"></div>
</div>
</div>
</div>
</body>
</html>

I saved the HTML code as index.html. In the above code, we create a “stage” container which will be the stage for our animation. There is also a div container class “cube”, which will define our entire cube. Inside the “cube” container, we will position all our cube faces/sides by nesting them individually.

I defined a different background-color for each “side” before I included the images — this allowed me to get the 3D cube slider perfect before placing the images on top. You can do it however you want. 🙂 Here is the HTML code without images:


/*Transform CSS example - Techsideonline.com HTML CSS 3d cube slider */
<div class="cube">
	<div class="side1" style="background-color:red">one</div>
	<div class="side2" style="background-color:green">two</div>
	<div class="side3" style="background-color:blue">three</div>
	<div class="side4" style="background-color:orange">four</div>
	<div class="side5" style="background-color:purple">five</div>
	<div class="side6" style="background-color:pink">six</div>
</div>

This should create a cube with different color sides/faces and the number spelled out on top.

If you run the index.html page with images, you should get the 6 images stacked up on top of each other. If you aren’t using images for now, you will see the different color containers/cube sides stacked on top of each other:

css transform 3d divs
No images, just divs with background-color

That’s it for the HTML. Let’s continue with the CSS.

CSS Part

Here we will convert our 6 images and use CSS Transform and CSS Animation properties to configure our cube and create a 3D shape. The CSS Transform property is used to to reshape our individual images to give the “sides” a cube-like appearance, and CSS Animation is used to “spin” the HTML CSS 3D Cube Slider. (See how the axis are positioned below.)

Open your style.css file and insert the following code:


/*Transform CSS example - Techsideonline.com HTML CSS 3d cube slider */
div .stage {

	perspective: 1200px;  /*set perspective to give our object 3D appearance */
	margin-top:200px
}

.cube{
	/*cube class should use CSS animation 'spincube', which we will define later.
          Our CSS animation should last 12 seconds and loop infinitely*/

     animation:spincube ease-in-out 12s infinite;
     -moz-animation:spincube ease-in-out 12s infinite; /*support for browsers*/
     -webkit-transform:spincube ease-in-out 12s infinite;
     -ms-transform:spincube ease-in-out 12s infinite;

    -webkit-transform-origin: 150px 150px 0; /*set the origin of transformation: X-offset, Y-offset, Z-offset */
    -moz-transform-origin: 150px 150px 0;
    -ms-transform-origin: 150px 150px 0;
    transform-origin: 150px 150px 0;
    

    transform-style:preserve-3d;  /*holds our 3d cube sides together as it transforms*/
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
}

/*setup shared properties all our cube sides/faces*/
.cube div {

	position:absolute;
	width:300px;
	height:300px;
	border:solid 1px #ddd;
	box-sizing:border-box;
	text-align:center; /* for text - not needed for images*/
	font-size:2em; /* for text - not needed for images*/
	
}

/*position each div/side relative to transform-origin.  Use CSS transform to create a cube shape for all browsers*/
.cube .side1 { /*front*/

	transform: translateZ(150px); 
       -moz-transform:translateZ(150px);
        -ms-transform:translateZ(150px);
        -webkit-transform:translateZ(150px);
}

.cube .side2 { /*right side*/
	transform: translateX(150px) rotateY(90deg);
        -moz-transform: translateX(150px) rotateY(90deg);
        -ms-transform: translateX(150px) rotateY(90deg);
        -webkit-transform: translateX(150px) rotateY(90deg);
}
.cube .side3 { /*back side*/
	transform: translateZ(-150px) rotateY(180deg);
       -moz-transform:translateZ(-150px) rotateY(180deg);
        -ms-transform:translateZ(-150px) rotateY(180deg);
       -webkit-transform:translateZ(-150px) rotateY(180deg);
}
.cube .side4 { /*left side*/
  	transform: translateX(-150px) rotateY(-90deg);
       -moz-transform: translateX(-150px) rotateY(-90deg);
       -ms-transform: translateX(-150px) rotateY(-90deg);
       -webkit-transform: translateX(-150px) rotateY(-90deg);
}
.cube .side5 { /*bottom side*/
  	transform: translateY(150px) rotateX(270deg);
       -moz-transform:translateY(150px) rotateX(270deg);
       -ms-transform:translateY(150px) rotateX(270deg);
       -webkit-transform:translateY(150px) rotateX(270deg);
}
.cube .side6 { /*top side */
  	transform: translateY(-150px) rotateX(270deg) rotateY(-180deg) rotateZ(-90deg);
       -moz-transform:translateY(-150px) rotateX(270deg) rotateY(-180deg) rotateZ(-90deg);
       -ms-transform:translateY(-150px) rotateX(270deg) rotateY(-180deg) rotateZ(-90deg);
       -webkit-transform:translateY(-150px) rotateX(270deg) rotateY(-180deg) rotateZ(-90deg);
}


Above, you should notice the transform property for each of the sides. What the transform property does is position each of our 3D Cube slider’s sides according to the transform-origin property we defined up top. As you can get translateX, translateY and translateZ move the <div> sides, and rotateX, rotateY, and rotateZ, rotates the div according to our origin. Translate accepts pixels (px) and rotate accepts degrees (deg) values.

Positioning and rotating each one of the sides/faces of the 3D Cube slider can take some time and thinking. Drawing out the cube on a sheet of paper can help. The X, Y and Z planes are positioned as follows:

transform CSS example
Z axis – towards you and away from you

Since our cube is 300px, the mid-way point of the cube is 150px from all sides (hence the transform-origin of 150px, 150px, 0px). Once the transform-origin is set, we can position all the sides relative to the center point of our 3D cube slider. So side1 is positioned +150 pixels on the X-axis, side3 is -150 pixels on the X-axis, and rotate is set to 180 degrees to flip the image/content in the <div>. You might have to do some thinking and math to get the positions correct and depending on which way you spin the 3D cube, the cube sides/images might have to be rotated different then mine.

It helps just working with just colors and text inside each of the side <div> containers. That way you can see if your content/images will be positioned from left to right. You can remove the images for now and put them back in later. If the text is positioned correctly (i.e. not flipped or backwards), so will your image when you add it back in.

Finally, creating the actual 3D cube is done! We created a “stage” and created a cube shape with our <div> containers. Now we are ready to utilize CSS animations to animate our 3D Cube slider.

Animate our HTML CSS 3D Cube Slider

I briefly covered CSS animations in my flat HTML CSS Slider. Animating a 3D cube slider takes a little more code than animating flat images, however it’s not too hard once you have the concept of keyframes down. For our animation to run, we need to define the keyframes. Now, at the bottom of our style.css file, add the following:


/*Transform CSS example - configure HTML CSS 3D Cube Slider animation */

  @keyframes spincube {
    from,to { /*show side 1 at beginning*/
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% { /*spin to side 2 */
      transform: rotateY(-90deg);

      -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
    }
    33% { /* spin to side 3 */
      transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
    }
    50% { /* spin to side 4 */
      transform: rotateY(-270deg);
      -moz-transform: rotateY(-270deg);
      -ms-transform: rotateY(-270deg) ;
    }
    66% { /* spin to side 5 (bottom of cube) */
      transform: rotateX(90deg);
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
    }
    83% { /* spin to side 6 (top of cube) */
      -moz-transform: rotateZ(-45deg) rotateX(270deg) rotateY(45deg);
      -ms-transform: rotateZ(-45deg) rotateX(270deg) rotateY(45deg);
      transform:  rotateZ(-45deg) rotateX(270deg) rotateY(45deg);
    }
  }

/*animation for chrome*/
  @-webkit-keyframes spincube { 
    from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { -webkit-transform: rotateY(-90deg);  }
    33%      { -webkit-transform: rotateY(-180deg); }
    50%      { -webkit-transform: rotateY(-270deg); }
    66%      { -webkit-transform: rotateX(90deg);}
    83%      { -webkit-transform: rotateZ(-45deg) rotateX(270deg) rotateY(45deg);}                          }
  }


I added comments to the code to make it slightly easier to follow along.

The above keyframes lasts 12 seconds, as noted by animation: spincube ease-in-out 12s infinite; at the very top of our CSS file, and loops infinitely. Since we have 6 sides, and the animation lasts 12 seconds, each side on our HTML CSS 3D Cube Slider will display for about 3 seconds. Therefore, when the animation reaches keyframe 16%, around 2 seconds have gone by, when it reaches keyframe 33%, 4 seconds have gone by, keyframe 66%, 6 seconds, etc. The total when keyframe is at 100% will be 12 seconds as defined by our animation property at the beginning of our style.css file.

Our HTML CSS 3D Cube Slider is complete! Launch the index.html file and you should see an animated 3D cube. Feel free to use whatever images you want. If your images are slightly bigger then 300px, please add the overflow:hidden; property to our .cube div selector. The overflow property will hide the “overflow” of images that do not fit on the 3D cube’s side.

Summary

In conclusion, as you can see, CSS has become a very powerful and easy-to-use coding language for animations. We can create an amazing 3D Slider just using CSS (no need for JavaScript). After working through this tutorial, you should have a decent understanding of CSS transform and CSS animation properties. You should also be able to understand how to create 3D objects using the various CSS properties we practiced. A 3D cube slider is a really cool way to cycle through images on your website if a flat-style css slider isn’t your style. I also wrote a tutorial to add a trendy flat-menu to your website.

Leave a Reply

Your email address will not be published. Required fields are marked *