Author: | ShimilSAbraham |
---|---|
Views Total: | 783 views |
Official Page: | Go to website |
Last Update: | May 24, 2021 |
License: | MIT |
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>