Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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):

  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 10/12/2015

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive