Skip to content
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)
CSS CoffeeScript
Branch: master
Clone or download

Latest commit

Latest commit 49b4ba8 Dec 1, 2018

Files

Permalink
Type Name Latest commit message Commit time
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-lock.json
package.json
renovate.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

You can’t perform that action at this time.