This repository provides information regarding a mini CSS framework aimed to display isometric cubes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ShimilSAbraham/Cube.CSS@45d9c3f/cube.css"><div class="cube">
<div class="front grey-l"></div>
<div class="side grey-d"></div>
<div class="top grey"></div>
</div>- purple
- pink
- blue
- red
- green
- orange
- indigo
- grey
- pacha
- yellow
Contributed by VRT36
- cyan
- teal
- steelblue
- grad1
- grad2
- grad3
- grad4
- grad5
- grad6
- 'color' class along with 'top'
- 'color-l' class along with 'front'
- 'color-d' class along with 'side'
use '-l' along with color name to get its lighter shade and '-d' for darker shade
<div class="cube">
<div class="front blue-l"></div>
<div class="side blue-d"></div>
<div class="top blue"></div>
</div>
that doesn't mean you have to stick on with this... let your mind do the work
- fly
- open
to make it fly, add these classes t-fly, f-fly, s-fly to open it up, add these classes t-open, f-open, s-open
<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>
you can even make your own custom hover by interchanging these hover classes to the div's that u desire
<div class="cube">
<div class="front grey-l f-open"></div>
<div class="side grey-d s-fly"></div>
<div class="top grey t-fly"></div>
</div>
<div class="cube">
<div class="front pacha-l f-fly"></div>
<div class="side pacha-d s-open"></div>
<div class="top pacha t-fly"></div>
</div>
<div class="cube">
<div class="front purple-l s-fly"></div>
<div class="side purple-d f-fly"></div>
<div class="top purple t-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>
