Create Animated 3D Cubes – Cube.CSS

Preview:

Description:

Cube.CSS is a CSS library for creating customizable, animated 3D cubes using plain HTML/CSS.

How to use it:

1. Load the Cube.css in the document.

<link rel="stylesheet" href="cube.css" />

2. Create a cube on the page.

• -l: along with ‘front’
• -d: along with ‘side’

<div class="cube">
  <div class="front blue-l"></div>
  <div class="side blue-d"></div>
  <div class="top blue"></div>
</div>

3. Available colors:

• purple
• pink
• blue
• red
• green
• orange
• indigo
• grey
• pacha
• yellow

4. Add hover effects (fly and open) to the cubes.

<div class="cube">
  <div class="top red t-fly"></div>
  <div class="front red-l f-fly"></div>
  <div class="side red-d s-fly"></div>
</div>

<div class="cube">
  <div class="top orange t-open"></div>
  <div class="front orange-l f-open"></div>
  <div class="side orange-d s-open"></div>
</div>

<div class="cube">
  <div class="front pink-l s-fly"></div>
  <div class="side pink-d t-fly"></div>
  <div class="top pink f-open"></div>
</div>