3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)
CSS CoffeeScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
demo
less
.gitignore
.tm_properties
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
CONVENTIONS.md
Gruntfile.coffee
LICENSE
README.md
TODOS.md
bower.json
package.json

README.md

cube.less

Build Status devDependency Status

3D (animated) cube using only CSS (LESS).

Demo

See this demo page. There's also a live production site (WIP) using these cubes.

Install

$ bower install cube.less

Options

Mixins

.makecube

Main mixin, it has the following options:

@size

Default: 100px

The length of a cube side.

@depth

Default: 50px

Cube depth alone the Z-axis.

@rotate-x

Default: 0deg

Rotate the cube along the X-axis.

@rotate-y

Default: 0deg

Rotate the cube along the Y-axis.

@rotate-z

Default: 0deg

Rotate the cube along the Z-axis.

.makeperspective

@perspective

Default: 2500

Make canvas perspective to parent element.

Additional Classes

.cube-border

No cube background, like ouline vision. apply it to cube container.

.cube-borderless

No outline, apply it to cube container.

.cube-unselectable

Make all cubes unselectable, apply it to cube parent wrapper, or specific cube. Both are ok.

Setup

The following is a basic markup:

...
<div class="cube-perspective">
  <span class="cube cube-01"><i></i><i></i><i></i><i></i><i></i><i></i></span>
  <span class="cube cube-02 cube-border"><i></i><i></i><i></i><i></i><i></i><i></i></span>
  <span class="cube cube-03 cube-borderless"><i></i><i></i><i></i><i></i><i></i><i></i></span>
  <span class="cube cube-04"><i></i><i></i><i></i><i></i><i></i><i></i></span>
</div>
...

Animation

See demo.

Dev Setup

npm install && grunt server

Author

Tunghsiao Liu

Licenses

MIT