Skip to content

sparanoid/cube.less

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •