cube.less
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