Dynamic Drive CSS Library- Rotating 3D cubes using CSS (IE compatible)

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: CSS3 demos: Here

Rotating 3D cubes using CSS (IE compatible)

Author: Dynamic Drive

This CSS3 example demonstrates how to create a rotating 3D cube that also works in IE10 and IE11. Each cube is constructed using a UL list with 4 LI elements- one for each side of the cube (front, back, top, and bottom sides). Each side is rotated 90deg along the x-axis relative to its peers and pushed out (using translateZ) to form 4 panels with a hallow center- or a 3D box! We leave out the left and right panels, as we'll only be rotating the box along the x-axis, where those two panels will never be exposed anyway.

IE10 and IE11 do not support CSS's transform-style: preserve-3d property that makes it easy to rotate all 4 sides of the cube just by rotating its parent container. To overcome this limitation, we instead rotate the cube by manually rotating each side of the box individually. Read the CSS comments for more info.

Demo (move your mouse over the cubes):

The CSS:

<style>

.mycube {
	font-size: 15px; /* adjust font size to change cube size */
	width: 8em;
	height: 8em;
	margin: 0;
	text-align: center;
	position: relative;
	margin-right: 5px; /* spacing between cubes */
	display: inline-block;
	-webkit-perspective: 1000px;
	perspective: 1000px; /* The lower the value, the more pronounced the 3d effect is */
}

.mycube, .mycube *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.mycube ul {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* IE 11 or below doesn't support this, so in IE, we need to add another "perspective" property here via IE specific media queries (see below) */
	-webkit-transform: translate3D(0,0,-4em);
	transform: translate3D(0,0,-4em); /* move cube back by 1/2 cube height (translateZ) to undo each cube's side being moved forward by 1/2 cube height */
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.mycube ul li{ /* cube sides */
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	height: 100%;
	-webkit-transition: 0.5s all;
	transition: 0.5s all; /* transition duration */
}

.mycube ul li span{
	font: bold 4em Arial;
	line-height: 2em; /* center text by setting line-height to cube's height (4m font size * 2em = 8em) */
}

.mycube ul li:nth-of-type(odd){
	background: darkred;
	color: white;
}

.mycube ul li:nth-of-type(even){
	background: #490B0B;
	color: white;
}

/* By default, all cubes show side 1 */

.mycube ul li:nth-of-type(1){
	-webkit-transform: rotateX(0deg) translate3D(0,0,4em);
	transform: rotateX(0deg) translate3D(0,0,4em); / set tranlateZ value to 1/2 cube height to bring it closer to screen, creating 3D effect */
}

.mycube ul li:nth-of-type(2){
	-webkit-transform: rotateX(-90deg) translate3D(0,0,4em);
	transform: rotateX(-90deg) translate3D(0,0,4em);
}

.mycube ul li:nth-of-type(3){
	-webkit-transform: rotateX(-180deg) translate3D(0,0,4em);
	transform: rotateX(-180deg) translate3D(0,0,4em);
}

.mycube ul li:nth-of-type(4){
	-webkit-transform: rotateX(-270deg) translate3D(0,0,4em);
	transform: rotateX(-270deg) translate3D(0,0,4em);
}

/* Cube #1: Show side 2 on hover */

.cube1:hover li:nth-of-type(1){
	-webkit-transform: rotateX(90deg) translate3D(0,0,4em);
	transform: rotateX(90deg) translate3D(0,0,4em);

}

.cube1:hover li:nth-of-type(2){
	-webkit-transform: rotateX(0deg) translate3D(0,0,4em);
	transform: rotateX(0) translate3D(0,0,4em);
}

.cube1:hover li:nth-of-type(3){
	-webkit-transform: rotateX(-90deg) translate3D(0,0,4em);
	transform: rotateX(-90deg) translate3D(0,0,4em);
}


.cube1:hover li:nth-of-type(4){
	-webkit-transform: rotateX(-180deg) translate3D(0,0,4em);
	transform: rotateX(-180deg) translate3D(0,0,4em);
}

/* Cube #2: Show side 3 on hover */

.cube2:hover li:nth-of-type(1){
	-webkit-transform: rotateX(180deg) translate3D(0,0,4em);
	transform: rotateX(180deg) translate3D(0,0,4em);
}

.cube2:hover li:nth-of-type(2){
	-webkit-transform: rotateX(90deg) translate3D(0,0,4em);
	transform: rotateX(90deg) translate3D(0,0,4em);
}

.cube2:hover li:nth-of-type(3){
	-webkit-transform: rotateX(0deg) translate3D(0,0,4em);
	transform: rotateX(0deg) translate3D(0,0,4em);
}


.cube2:hover li:nth-of-type(4){
	-webkit-transform: rotateX(-90deg) translate3D(0,0,4em);
	transform: rotateX(-90deg) translate3D(0,0,4em);
}

/* Cube #3: Show side 4 on hover */

.cube3:hover li:nth-of-type(1){
	-webkit-transform: rotateX(270deg) translate3D(0,0,4em);
	transform: rotateX(270deg) translate3D(0,0,4em);
}

.cube3:hover li:nth-of-type(2){
	-webkit-transform: rotateX(180deg) translate3D(0,0,4em);
	transform: rotateX(180deg) translate3D(0,0,4em);
}

.cube3:hover li:nth-of-type(3){
	-webkit-transform: rotateX(90deg) translate3D(0,0,4em);
	transform: rotateX(90deg) translate3D(0,0,4em);
}


.cube3:hover li:nth-of-type(4){
	-webkit-transform: rotateX(0deg) translate3D(0,0,4em);
	transform: rotateX(0deg) translate3D(0,0,4em);
}

/* Cube #4: Show side 1 (full rotation) on hover */

.cube4:hover li:nth-of-type(1){
	-webkit-transform: rotateX(360deg) translate3D(0,0,4em);
	transform: rotateX(360deg) translate3D(0,0,4em);
}

.cube4:hover li:nth-of-type(2){
	-webkit-transform: rotateX(270deg) translate3D(0,0,4em);
	transform: rotateX(270deg) translate3D(0,0,4em);
}

.cube4:hover li:nth-of-type(3){
	-webkit-transform: rotateX(180deg) translate3D(0,0,4em);
	transform: rotateX(180deg) translate3D(0,0,4em);
}


.cube4:hover li:nth-of-type(4){
	-webkit-transform: rotateX(90deg) translate3D(0,0,4em);
	transform: rotateX(90deg) translate3D(0,0,4em);
}

/* IE specific media query to target IE10 and IE11, since it doesn't support preserve-3d */
/* See: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
	.mycube ul{
		perspective: 1000px;
	}
}

</style>

The HTML:

<div class="mycube cube1">
	<ul>
	<li><span>1</span></li>
	<li><span>2</span></li>
	<li><span>3</span></li>
	<li><span>4</span></li>
	</ul>
</div>

<div class="mycube cube2">
	<ul>
	<li><span>1</span></li>
	<li><span>2</span></li>
	<li><span>3</span></li>
	<li><span>4</span></li>
	</ul>
</div>

<div class="mycube cube3">
	<ul>
	<li><span>1</span></li>
	<li><span>2</span></li>
	<li><span>3</span></li>
	<li><span>4</span></li>
	</ul>
</div>

<div class="mycube cube4">
	<ul>
	<li><span>1</span></li>
	<li><span>2</span></li>
	<li><span>3</span></li>
	<li><span>4</span></li>
	</ul>
</div>

Code Info

Rate this code:

Date Posted: 10/12/2015

Revision History: None

Usage Terms: Click here