Press "Enter" to skip to content

CSS mini Framework Aimed to Display Isometric Cubes | Cube.CSS

Cube.CSS is a repository that provides information regarding a small CSS framework intended to display isometric cubes. Cube.CSS is a CSS library for creating animated and customizable 3D cubes using plain HTML / CSS.

create a 3d picture cube, css3 3d cube animation with image, 3d spinning cube generator, 3d cube model online, rotating cube animation, free gif 3d cube maker online

How to make use of it:

1. Load the Cube.css within the doc.

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

2. Create a cube on the web page.

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

3. Add hover results (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>
<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>

Create Animated 3D Cubes, Cube.CSS Plugin/Github, 3d cube video maker online, 3d cube image online


See Demo And Download

Official Website(ShimilSAbraham): Click Here

This superior jQuery/javascript plugin is developed by ShimilSAbraham. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *