Create Animated 3D Cubes – Cube.CSS

Category: CSS & CSS3 , Recommended | May 24, 2021
Author: ShimilSAbraham
Views Total: 69 views
Official Page: Go to website
Last Update: May 24, 2021
License: MIT

Preview:

Create Animated 3D Cubes – Cube.CSS

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>

You Might Be Interested In:


Leave a Reply